8

I'm trying to get up to speed on HTML5 by prototyping an extremely simple drawing app using <canvas> and touch events like ontouchstart and ontouchmove.

This is displaying and working fine in an Android emulator where I use mouse clicks to simulate touch events. However, it doesn't work at all when running in my desktop browser (Safari 5.1.1, Firefox 7 on Windows).

I thought the mouse click events would be interpreted as touch events like they are when running within the emulator.

I wonder now if perhaps desktop browsers simply don't support touch events.

Justin
  • 6,031
  • 11
  • 48
  • 82

5 Answers5

11

It's actually the other way round. Mobile browsers translate touch to mouse events for legacy support. If it needs to work on both mobile and desktop, and you don't really need touch events, you could just use mouse events instead. Failing that, bind both touch and mouse events and have the touch event cancel the mouse event. This way on mobile devices the touch fires and mouse doesn't. On desktop the touch doesn't fire and the mouse will.

For pilau, here's a simple example of cancelling the click event on mobile devices. Please note the question is more about drawing which would involve click dragging, which would require a bit more code for detection, but the basic idea is the same, bind the events you need to handle. Then e.preventdefault() will stop the mobile browsers from emulating click type events.

$('#element').on('touchend click', function(e){

   // Do your onclick action now

   // cancel the onclick firing
   e.preventDefault();
});
franzlorenzon
  • 5,845
  • 6
  • 36
  • 58
Lee
  • 10,496
  • 4
  • 37
  • 45
  • 1
    I would send you my sweet love if you could post a code snippet showing how you do just that! :) – pilau Feb 24 '13 at 00:42
  • @pilau if your using jquery, just use `event.preventDefault()` in your event handler function and it will stop the mobile browser from emulating the mouse click event, i'll put an example in my main post for you. – Lee Feb 25 '13 at 16:25
  • 1
    Oh, it is that simple! Thank you so much. – pilau Mar 14 '13 at 14:55
3

Firefox 6 and above supports the touch events. See the compatibility table here.

MDN article on Touch Events

EDIT : Are you testing with a touchscreen or the mouse? The mouse events do not automatically translate to touch events. See this post for how to simulate touch events with a mouse.

Community
  • 1
  • 1
pradeek
  • 21,445
  • 2
  • 31
  • 32
  • the MDN article links to an example but it doesn't work for me in current version of FF or Safari. https://developer.mozilla.org/samples/domref/touchevents.html – Justin Nov 23 '11 at 01:08
  • 1
    Pretty sure that only firefox mobile 6+ supports touch events, not firefox for the desktop (unless you use the moz-touch events). – Matt Wonlaw Feb 22 '12 at 02:07
0

If you are working with react, the synthetic events are different: onClick Works for both, mobile and desktop. onTouchStart works only for mobile. Also, this event goes before the onClick event. Maybe it is the first event to being trigged.

In my case, I needed an event before the onClick event in a mobile and desktop environment, so I used onMouseDown. which with synthetic events from React, works for both, mobile and desktop.

Remember, for development propose, the easiest way to test in mobile or in desktop is with the developer tools, clicking on Toggle device toolbar or cmd + shift + M in the inspector.

Good luck!

ajaysinghdav10d
  • 1,771
  • 3
  • 23
  • 33
ValRob
  • 2,584
  • 7
  • 32
  • 40
0

Use onTouchStart/onTouchEnd for mobile device. Use onMouseDown/onMouseUp for desktop or larger screens.

<button onTouchStart={} onTouchEnd={} onMouseDown={} onMouseUp={}>Click Me</button>
Clark
  • 169
  • 3
  • 11
0

ontouchstart will be a add on to the iphones version of webkit for javascript. you could test it but only on an emulator.

Joseph Le Brech
  • 6,541
  • 11
  • 49
  • 84