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 filterAlteredClick, {isAlteredClick} 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.

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

Dependencies

None!

Related

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

License

MIT © Federico Brigante