https://github.com/omriyariv/jquery-singleclick

jQuery plugin for adding a custom 'singleclick' event to differentiate a single-click from a double-click
https://github.com/omriyariv/jquery-singleclick

click dblclick jquery jquery-plugin

Last synced: 8 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/omriyariv/jquery-singleclick
• Owner: omriyariv
• License: mit
• Created: 2015-09-12T09:01:09.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-06-30T15:23:49.000Z (over 8 years ago)
• Last Synced: 2024-11-15T21:06:27.251Z (about 1 month ago)
• Topics: click, dblclick, jquery, jquery-plugin
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 14
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](http://bower.io/) or [npm](https://www.npmjs.org/).

```sh

bower install jquery-singleclick

npm install jquery-singleclick

```

### Usage

Start by including the plugin in your app.

##### Using a simple HTML script tag:

```html

```

##### Or using an AMD loader:

```js

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:

```js

$('#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:

```js

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

$.event.special.singleclick.timeout = 750;

```