Android and Chrome Mobile: jQuery .click() method will not work on elements with the .draggable() method

[macmadill]

trafficstars

Tested on a Nexus 9 running Android 5.0.1 & Samsung SM-T520 running 4.4.2.

The jQuery .click() method will no longer work on elements that have the .draggable() method attached to them as well. All elements nested inside the draggable element will also not trigger the .click() method.

This issue only occurred on Chrome Mobile. Firefox and the native Android "Internet" browser did not have this issue on the devices I tested. Chrome versions were 38 & 40.

I have created a codepen here to reproduce the issue: http://codepen.io/macmadill/full/gbXmZG

[macmadill]

Chrome appears to be more sensitive than the other browsers to the 'touchmove' event and is causing touch-punch's simulated click event to be canceled.

[macmadill]

Similar to the pull request for issue #41 : https://github.com/furf/jquery-ui-touch-punch/pull/204/files Instead of having 'touchmove' cancel the click event we could compare the start X & Y positions with the end X & Y positions.

[davideanderson]

Any progress on a fix for this?

[fr33kvanderwand]

@davideanderson take a look what mchat did, it's a basic solution but does not work in all cases; I adopted her solution in the way that start and end position don't have to be the exact same (+/-2px); https://github.com/fr33kvanderwand/jquery-ui-touch-punch

[KennethVerbeure]

Will this be Merged anytime soon ? i am noticing the same issue on android chrome and instead of using a forked repo to have a working solution i would rather use the default release

[JakedUp]

I would love to get this fix for Chrome on Android! Is there an ETA on when this will be merged?

[andreikainer]

Same issues for me. Please let me know when fixed.

[TrevorPage]

I've got the same issue. HTC 10 running 6.0.1, jQuery UI 1.12.1, Touch Punch 0.2.3. I am using these libraries within a WebView component of a native Android application.

I have not tried the forked version above yet, but something I just discovered that does fire reliably with the standard library in use is touchend (.on("touchend", function() { ...). Obviously it doesn't fire until the finger is lifted, but for my purposes I think it'll be an acceptable solution.

[dhhung89]

Same issues for me. Please let me know when it's fixed.

[JavanXD]

Had the same issue on Android Mobile Chrome Browser but not on Android Mobile Firefox Browser. Also had this issue on my Android Cordova App, because i think it uses the Chrome Browser as WebView.

You don't need to compare pixels, you can use a better solution like:

var touchmoved = false;
$(".selectPatient").on('touchmove', function(e){
	touchmoved = true;

	// do moving stuff
}).on('touchstart', function(e){
	touchmoved = false;
				
}).on('click touchend', function (e) { 
	e.stopPropagation();
	e.preventDefault();
	e.stopImmediatePropagation();
				
	if(touchmoved != true)
	{
					
		// do clicking stuff
	}
				
});

hope this helps

[arattray28]

Using jquery mobiles vclick in place of click seemed to work for me.