filter-altered-clicks

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

Usage

filterAlteredClicks(listener) accepts a function and returns a function.

Simplest usage:

element.addEventListener('click', filterAlteredClicks(function (e) {
    console.log('Unaltered click!');
}));

jQuery usage:

$(element).on('click', filterAlteredClicks(function (e) {
    console.log('Unaltered click!');
}));

Ajax loading example, using jQuery for brevity, but it's not necessary:

$('a.ajax-link').on('click', filterAlteredClicks(function (e) {
    $('#content').load(this.href);
    e.preventDefault();
}));

Install

Pick your favorite:

<script src="dist/filter-altered-clicks.browser.js"></script>

npm install --save filter-altered-clicks

var filterAlteredClicks = require('filter-altered-clicks');

import filterAlteredClicks from 'filter-altered-clicks';

API

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:

el.addEventListener('click', filterAlteredClicks(function (e) {
    console.log('Unaltered click!');
    console.log('I’m altering this click:');
    e.preventDefault();
}));

el.addEventListener('click', filterAlteredClicks(function (e) {
    // This will never be called because the previous one used .preventDefault
}));

el.addEventListener('click', filterAlteredClicks(function (e) {
    console.log('Unaltered click! But maybe .preventDefault was already called');
}, true)); //<-- notice the true as the second parameter of filterAlteredClicks

Dependencies

None!

Related

• on-off: Add and remove multiple events on multiple elements in <1KB

License

MIT © Federico Brigante