JQuery - separation of events onСlick and onDblСlick

this.window.$.on( 'click', function( event ){ context.toggleActive( ); } ) .on( 'dblclick', function( event ){ context.toggleMaximized( ); } ); 

When developing JS applications, there is often an inconvenience (it’s still difficult to call this a problem) when it is necessary to separate a click event from a double click due to the nature of the processing of event data — browsers. I think many of you have come across the fact that in all browsers the onClick event occurs first and then after - onDblClick . I don’t know about you, but it really hinders me to calmly write the handling of events of this kind.

But the problem is that there are no simple and convenient solutions to this problem. So I had to get down to business and write my decision.

Plugin

The base of the plugin is interception of the event registration call (on, off, click, dblclick) , followed by replacement with its own events.

 $.fn.on = function( ) // ( types, selector, data, fn, one ) { var argumentList = $.extend( true, [], arguments ); var eventType = argumentList[0]; //.... case eventType === 'click' || eventType === 'dblclick': { //        onMethod.call( this, 'reg' + eventType, eventSelector, eventData, function( regEvent, event ) { //  ,          if( this === regEvent.target ) { //       regEvent.preventDefault( ); regEvent.stopPropagation( ); //     event.isDefaultPrevented = function returnFalse( ){ return false; }; event.isPropagationStopped = function returnFalse( ){ return false; }; //    eventFunc.call( regEvent.target, event ); //         -  if( !event.isPropagationStopped( ) ) { $( event.currentTarget.offsetParent ).trigger( 'click', [ event ] ); } } } ); //     var clickEvents = $._data( this[0], 'events' ) ? $._data( this[0], 'events' )[ 'click' ] : undefined; //        -  if( typeof clickEvents === 'undefined' ) { //   onMethod.call( this, 'click', eventSelector, eventData, singleDoubleClick ); //     onMethod.call( this, 'mousedown', eventSelector, eventData, startMoving ); onMethod.call( this, 'mouseup', eventSelector, eventData, endMoving ); } } //.... } 

After the interception of the event - from the moment of the first click, a timer is started which counts whether the mouse has been shifted for a certain period.
And if there was a shift, or there was no second click, then the onClick event occurs , otherwise onDblClick .

  var timeOut = 200; //   var start = { x: 0, y: 0 }; //   var end = { x: 0, y: 0 }; //   var distance = 0; //       var maxDistance = 3; var onMethod = $.fn.on; //   on var offMethod = $.fn.off; //   off var singleDoubleClick = function( event ) { //     ,       ,        //       ,   ,      event.currentTarget.clicks = ( event.currentTarget.clicks || 0 ) + 1; //   -     event.preventDefault( ); event.stopPropagation( ); var timeoutCallback = function( event ) { return function( ) { //   clearTimeout( event.currentTarget.timer ); //  - ,      if( event.currentTarget.clicks === 1 && distance < maxDistance ) { $( event.currentTarget ).trigger( 'regclick', [ event ] ); } else if( event.currentTarget.clicks > 1 && distance < maxDistance ) { event.type = 'dblclick'; $( event.currentTarget ).trigger( 'regdblclick', [ event ] ); } //    event.currentTarget.clicks = 0; }; }; //   event.currentTarget.timer = setTimeout( timeoutCallback( event ), timeOut ); }; //   var startMoving = function( event ) { start = $.getMousePosition( event ); }; //   var endMoving = function( event ) { end = $.getMousePosition( event ); var dx = end.x - start.x; var dy = end.y - start.y; distance = Math.sqrt( dx * dx + dy * dy ); }; 

')
Look at the plugin itself can be here: GitHub
I hope this decision will be useful to someone else.