From 36584ac5fb53965fdad2981f7b200da2ff6230ad Mon Sep 17 00:00:00 2001 From: Creosteanu Date: Tue, 3 Jun 2014 18:36:45 +0200 Subject: [PATCH 1/3] Click stops working after dragging div. --- jquery.ui.touch-punch.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/jquery.ui.touch-punch.js b/jquery.ui.touch-punch.js index 16ce41d..16b5663 100755 --- a/jquery.ui.touch-punch.js +++ b/jquery.ui.touch-punch.js @@ -10,6 +10,8 @@ */ (function ($) { + var _touchMoved= false; + // Detect touch support $.support.touch = 'ontouchend' in document; @@ -80,7 +82,7 @@ touchHandled = true; // Track movement to determine if interaction was a click - self._touchMoved = false; + _touchMoved = false; // Simulate the mouseover event simulateMouseEvent(event, 'mouseover'); @@ -104,7 +106,7 @@ } // Interaction was not a click - this._touchMoved = true; + _touchMoved = true; // Simulate the mousemove event simulateMouseEvent(event, 'mousemove'); @@ -128,7 +130,7 @@ simulateMouseEvent(event, 'mouseout'); // If the touch interaction did not move, it should trigger a click - if (!this._touchMoved) { + if (!_touchMoved) { // Simulate the click event simulateMouseEvent(event, 'click'); From acc882c6e8292ea5dc73843e744a49327d227f36 Mon Sep 17 00:00:00 2001 From: Creosteanu Date: Tue, 3 Jun 2014 18:41:17 +0200 Subject: [PATCH 2/3] Updating minified file. --- jquery.ui.touch-punch.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.ui.touch-punch.min.js b/jquery.ui.touch-punch.min.js index 31272ce..cd66af0 100644 --- a/jquery.ui.touch-punch.min.js +++ b/jquery.ui.touch-punch.min.js @@ -8,4 +8,4 @@ * jquery.ui.widget.js * jquery.ui.mouse.js */ -!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery); \ No newline at end of file +(function($){var _touchMoved=false;$.support.touch="ontouchend"in document;if(!$.support.touch){return}var mouseProto=$.ui.mouse.prototype,_mouseInit=mouseProto._mouseInit,_mouseDestroy=mouseProto._mouseDestroy,touchHandled;function simulateMouseEvent(event,simulatedType){if(event.originalEvent.touches.length>1){return}event.preventDefault();var touch=event.originalEvent.changedTouches[0],simulatedEvent=document.createEvent("MouseEvents");simulatedEvent.initMouseEvent(simulatedType,true,true,window,1,touch.screenX,touch.screenY,touch.clientX,touch.clientY,false,false,false,false,0,null);event.target.dispatchEvent(simulatedEvent)}mouseProto._touchStart=function(event){var self=this;if(touchHandled||!self._mouseCapture(event.originalEvent.changedTouches[0])){return}touchHandled=true;_touchMoved=false;simulateMouseEvent(event,"mouseover");simulateMouseEvent(event,"mousemove");simulateMouseEvent(event,"mousedown")};mouseProto._touchMove=function(event){if(!touchHandled){return}_touchMoved=true;simulateMouseEvent(event,"mousemove")};mouseProto._touchEnd=function(event){if(!touchHandled){return}simulateMouseEvent(event,"mouseup");simulateMouseEvent(event,"mouseout");if(!_touchMoved){simulateMouseEvent(event,"click")}touchHandled=false};mouseProto._mouseInit=function(){var self=this;self.element.bind({touchstart:$.proxy(self,"_touchStart"),touchmove:$.proxy(self,"_touchMove"),touchend:$.proxy(self,"_touchEnd")});_mouseInit.call(self)};mouseProto._mouseDestroy=function(){var self=this;self.element.unbind({touchstart:$.proxy(self,"_touchStart"),touchmove:$.proxy(self,"_touchMove"),touchend:$.proxy(self,"_touchEnd")});_mouseDestroy.call(self)}})(jQuery); \ No newline at end of file From c0fd62d4c45432b7ba17bdd5a0b0f28ddc1913f4 Mon Sep 17 00:00:00 2001 From: Stuart Marsden Date: Wed, 30 Jul 2014 17:50:28 +0300 Subject: [PATCH 3/3] Added a 300ms timeout to catch clicks better on Android. --- jquery.ui.touch-punch.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/jquery.ui.touch-punch.js b/jquery.ui.touch-punch.js index 16b5663..99b321a 100755 --- a/jquery.ui.touch-punch.js +++ b/jquery.ui.touch-punch.js @@ -10,7 +10,7 @@ */ (function ($) { - var _touchMoved= false; + var _touchMoved= false, _start, _end; // Detect touch support $.support.touch = 'ontouchend' in document; @@ -83,6 +83,9 @@ // Track movement to determine if interaction was a click _touchMoved = false; + + // Get the start time to test for click + _start = +new Date(); // Simulate the mouseover event simulateMouseEvent(event, 'mouseover'); @@ -104,8 +107,7 @@ if (!touchHandled) { return; } - - // Interaction was not a click + // Seen some movement may still be a click if quick _touchMoved = true; // Simulate the mousemove event @@ -122,6 +124,9 @@ if (!touchHandled) { return; } + + // Get the end time of the touch + _end = +new Date(); // Simulate the mouseup event simulateMouseEvent(event, 'mouseup'); @@ -130,7 +135,8 @@ simulateMouseEvent(event, 'mouseout'); // If the touch interaction did not move, it should trigger a click - if (!_touchMoved) { + // Also if the touch lasted less than 300ms count as click + if (!_touchMoved || _end - _start < 300) { // Simulate the click event simulateMouseEvent(event, 'click');