click-cluck

Postpones "click" event to prevent it in case of "dblclick" event

Generally it is a bad idea to have meaningful click and dblclick handlers on the same target. But if your styleguide already includes such things, this utility will help.

Installation

npm install --save @redneckz/click-cluck

How-to

Pure JS Example

<div role="row" id="the-best-product">
  <span role="cell">The best price ever!<span>
  <span role="cell">Give me two!<span>
</div>

import { ClickCluck } from '@redneckz/click-cluck';

const theBestProduct = ClickCluck(document.getElementById('the-best-product'));

theBestProduct.onclick = () => console.log('Just wait a bit...');
theBestProduct.ondblclick = () => console.log('Need a package?');

Press twice intermittently. And you will get:

Just wait a bit...
Just wait a bit...

Make double click. And here it is:

Need a package?

Also timeout can be configured:

const theBestProduct = ClickCluck(
  document.getElementById('the-best-product'),
  500, // 500ms by default
);

License

MIT