benhowdle89 / touche Goto Github PK

When using the jQuery implementation of this library e.g.

// or with jQuery

$('.myButtons').on('click', handleClicks);

The problem addressed in #2 still exists. A device with a mouse that is touch enabled registers both events and it appears to the user nothing is happening.

Does it work on inline onclick="myfunction();" ?
Can't seem to test how your script works...

Their signatures are:

.on( events [, selector ] [, data ], handler(eventObject) )
.off( events [, selector ] [, handler(eventObject) ] )

but touche.js only handles the trivial case where events is a single event name.

Problem cases:

• events is a space-separated list of event names, possibly namespaced
• events is an object, which causes our subsequent slice() call to explode

See https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/

tl;dr: this approach is flawed...it takes "does the browser support touch events" as an indication that "it's a touch only device". this is not the case (for instance on Chromebook Pixel, any Windows 8 etc laptop with a touchscreen as well, etc)

I've noticed a very wide spread problem with touch events on some devices. It appears with every touch event library (like this one) I've tested so far as well as an own minimal solution.
It appears on the default Android browser for example, and does not appear on iOS and Chrome for Android.
It seems that an additional click event is fired right after the touch event. The problem is: the touch and the click event only share coordinates, not the tapped element.

This is a problem when you develop a "one page app" and you change the content by tapping an element. When a link appears at the exact spot where you tapped the screen that link gets triggered as well. I don't know what exactly happens, but this is, what it feels like and I don't know how to deal with this.
Does anyone know a solution to that problem?

This is not just a ask for help. If someone knows a solution it should be implemented into this script as well ;)

var isTouch = 'ontouchstart' in window || 'msmaxtouchpoints' in window.navigator;

isTouch == true;

Tested on Firefox 40 & 41, Mac OSX Yosemite

Take a look at http://stackoverflow.com/a/25727560/3791179

The way the click event works is that if you start and end your click in the same place, the click event will fire. If you move between clicking down and releasing, it doesn't fire.

A touch even that emulates click should work the same way. If the user touchstarts and then touchmoves, the click event shouldn't be triggered. It should only be triggered if there's no movement between touchstart and touchend.

Touch event work one time on each element
http://jsfiddle.net/k9sLzyas/

Would love to pull this in through npm! :)

It doesn't matter where you lift your finger in order to active the event. You should at least check if the target of touchstart and touchend are the same.

Will you update the readme to explain how this is different than fastclick.js? Thanks :)

What happens, if you have a touch device that also has a mouse or equivalent pointing device, say a PC with Windows 8 and a touch screen. I guess then the elements would not react to click events, would they? Also, what's the case if you select an element with the keyboard and hit enter?

Unfortunately I cannot verify my worries on real hardware, since I don't have a touch PC.

At the end of user scrolling a click event gets fired due to the way touche works (touchend)

As discussed here: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript/13470899#13470899, 'onmsgesturechange' in window detects non-touch IE10+.

I recommend testing for navigator.msMaxTouchPoints to detect touch IE 10 + only.

Hi! Does this library have a TypeScript .d.ts file associated with it so I can use it in a TypeScript project?