Filter-altered-clicks NPM

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(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();
	})
);

Install

npm install --save 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:

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.