Single and double click in JS

by Fabien Snauwaert

HTML

<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>

	<div id="log" style="background: #efefef;"></div>

JavaScript

$( document ).ready(function() {

		$( '.clickit' ).click( function( event ) {
			console.log( event.originalEvent.detail, event.originalEvent.timeStamp );

			/** Ignore double clicks **/
			if ( event.originalEvent.detail === 1 ) {
				$( '#log' ).append( 'Single click event received<br>' );
				return;
			} else if ( event.originalEvent.detail === 2 ) {
				$( '#log' ).append( 'Double click event received<br>' );
			} else {
				$( '#log' ).append( 'Click event received with more than two clicks<br>' );
			}

		});

});

// Created 2019-01-31. In all of Firefox 65.0, Chrome 71.0.3578.98 and Safari 12.0.2 (all on Mac), the double click actually triggers a single click too.

// this is a contribution to https://stackoverflow.com/questions/880608/prevent-click-event-from-firing-when-dblclick-event-fires#comment95723317_29993141