thaipham / jquery-singleclick

jQuery plugin for adding a custom 'singleclick' event to differentiate a single-click from a double-click

jquery-singleclick

jQuery plugin for adding a custom 'singleclick' event to differentiate a single-click from a double-click. The custom 'singleclick' event is fired after a standard click event with a small delay to make sure that the original first click wasn't a part of a double-click.

Installation

Clone this repository or install via Bower or npm.

bower install jquery-singleclick
npm install jquery-singleclick

Usage

Start by including the plugin in your app.

Using a simple HTML script tag:

<script src="jquery-2.1.4.js"></script>
<script src="jquery-singleclick.js"></script>

Or using an AMD loader:

require('jquery-singleclick', function($) {
    // When using AMD the plugin will look for the 'jquery' dependancy.
});

After including the plugin, you'll be able to register handlers for the custom 'singleclick' event as you would register any other jQuery handler:

$('#someElement').on('singleclick', function(e) {
    console.log('I was clicked once only');
});

$('#someElement').on('click', function(e) {
    console.log('I was clicked');
});

$('#someElement').on('dblclick', function(e) {
    console.log('I was double-clicked');
});

In the above example, double-clicking the element will trigger 2 'click' events followed by a 'dblclick' event, but no 'singleclick' event. However, if the element is only clicked once, a 'click' event will be immediately fired, followed by a delayed 'singleclick' fired after we are certain that this is not a double-click.

Configuration

The default delay time to account for a double-click is 250 miliseconds. This can be configured:

// Two clicks 750ms apart will be considered as a double-click and the 'singleclick' event will not be fired.
$.event.special.singleclick.timeout = 750;