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:
- ALT-click
- CTRL-click
- SHIFT-click
- CMD-click
- Any clicks that aren’t left-clicks
- Clicks that already received
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';
Returns a listener
function that is called by addEventListener
or jQuery.on
. Receives the Event
as the first parameter.
Type: function
The same listener function you would pass to addEventListener(type, listener)
and .on(type, listener)
.
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.
Returns true if any modifier were held while clicking, or if any button other than the main button was clicked.
Type: MouseEvent
The event object received in the listener function
None!
- on-off: Add and remove multiple events on multiple elements in <1KB
MIT © Federico Brigante