Handle touchscreen + mousepointer devices

[jamietre]

When ImageMapster detects a touch-screen device it disables the mouseover events, otherwise clicking something would cause the highlight to flash before it was selected, which looks a bit funny -- mostly on older, slow mobile devices. This is because most touchscreen devices fire mouseover, mouseout and click in that order when touching something. So I disabled mouseover & mouseout when a touchscreen is detected.

Because computers with touch screens in addition to conventional mouse pointers are becoming more common, this is no longer acceptable.

Anyone who wants an immediate solution should use this code to tell ImageMapster to never treat anything as a touchscreen device:

$.mapster.isTouch = false;

This will force it to think you're using a non-touchscreen device and everything should work fine, except the initial problem I mention. On a fast computer you probably won't notice. The default disabling of mouseover events has been removed in the latest push as well until I have time to implement a better solution as described below.

The longer term solution is non-trivial. We could try to detect whether a device is touchscreen-only and only disable the hover effects in those situations e.g.

http://stackoverflow.com/questions/7838680/detecting-that-the-browser-has-no-mouse-and-is-touch-only

This question has no good answer. Even if we could figure this out, it doesn't address devices with both pointers and touchscreen.

The desired effect is that a touch event would not trigger the hover effects. The only way I can think to accomplish this is to watch the event series and only trigger the hover effect after waiting some period of time. This would involve using timers and could result in undesirable UI effects.

Another way would be to make an ongoing assessment of the UI method the user is using by tracking the time between mouseover, mouseout and click events. It would be fairly easy to determine which input mode was used at the time of the mouseclick. Which that's too late to stop the hover effect if it turns out to have been initiated by a touch, we can "switch modes" at that point, assuming they're using a touch pointer. We can re-enable mouseover highlighting by watching for mousemove events that are not immediately followed by a click. (Note that even touchscreen devices can fire mousemove events, see the SO question above, so we can't just check if a mouse move event happens at all, we have to identify specific behavior).