How to prevent simulated mouse events in mobile browsers?

Question

Mobile browsers simulate mouse events in order to support websites that only attach handlers to mouse events. However, if you want to implement two interaction models - one for mouse events, and one for touch events - then it's helpful to prevent the browser from simulating mouse events.

On iOS Safari this is fairly straightforward - simply run preventDefault on touchend:

jQuery(document).on('touchend', function(e) {
  // Do some logic      
  e.preventDefault();
});

That's pretty sane. Unfortunately, neither Android's default browser nor Dolfin cancel mouse simulation using this technique. (Dolfin will cancel mousedown when preventDefault is run on touchstart - but that's not very helpful, because you don't know what action the finger will take on touchstart.)

Is there some other way of conditionally, or even not conditionally, preventing simulated mouse events from firing?

[EDIT]

In order to begin to understand the problem(s) better, I've started a touch events compatibility table at: http://labs.cruncher.ch/touch-events-compatibility-table/

Answer 1

While there are some crafty ways to achieve this, there are two common practices that I use to get around this discrepancy:

1) Use flags

Setting boolean flags in your event handlers, such as mouseIsDown or mouseIsMoving, can be set and checked for mouse and touch events. If a user clicks a mouse, accept that as a mouse event. Then, if a touch event occurs along with it, disregard it.

2) Implement only what's necessary

Well, this is good practice anyway. Don't bother adding touchmove and mousemove events if you don't need to. It will just make it harder to maintain the code. Edit: Probably should have been more specific: consider rethinking your UI if you need more advanced event tracking.

Lastly, don't rely on external hardware configuration lists, as these are rarely 'completely' accurate.