Filter alt-click, ctrl-click, shift-click, middle click, ...
MIT License
Filter alt-click, ctrl-click, shift-click, middle click, ...
Middle-clicking on a link should open it in a new tab. SPAs hijack normal links to load them via ajax, breaking all altered clicks... unless they filter-altered-clicks
😉
Altered clicks are:
preventDefault()
. Note
filterAlteredClicks(listener)
accepts a function and returns a function.
Simplest usage:
element.addEventListener(
'click',
filterAlteredClicks(event => {
console.log('Unaltered click!');
})
);
jQuery usage:
$(element).on(
'click',
filterAlteredClicks(event => {
console.log('Unaltered click!');
})
);
Ajax loading example, using jQuery for brevity, but it's not necessary:
$('a.ajax-link').on(
'click',
filterAlteredClicks(event => {
$('#content').load(this.href);
event.preventDefault();
})
);
npm install --save filter-altered-clicks
import filterAlteredClick, {isAlteredClick} from 'filter-altered-clicks';
filterAlteredClicks(listener, [onlyPhysical])
Returns a listener
function that is called by addEventListener
or jQuery.on
. Receives the Event
as the first parameter.
listener
Type: function
The same listener function you would pass to addEventListener(type, listener)
and .on(type, listener)
.
onlyPhysical
Type: boolean
, defaults to false
Once filtered, listener
is normally not called if the event has already been defaultPrevented
. Set this parameter to true to avoid this behavior.
Example:
element.addEventListener(
'click',
filterAlteredClicks(event => {
console.log('Unaltered click!');
console.log('I’m altering this click:');
event.preventDefault();
})
);
element.addEventListener(
'click',
filterAlteredClicks(event => {
// This will never be called because the previous one used .preventDefault
})
);
element.addEventListener(
'click',
filterAlteredClicks(event => {
console.log(
'Unaltered click! But maybe .preventDefault was already called'
);
}, true)
); //<-- notice the true as the second parameter of filterAlteredClicks
This is called onlyPhysical
because it refers to "only physical alterations", which is altered by keyboard and not by code.
isAlteredClick(event)
Returns true if any modifier were held while clicking, or if any button other than the main button was clicked.
event
Type: MouseEvent
The event object received in the listener function
None!
MIT © Federico Brigante