Touch Screen and Javascript DOM Mousedown Event

Question

I have a javascript web application that uses a touchscreen, browser is webkit based.

I am having a problem with this:

addEventListener("mousedown", function(event){  
    console.log('down fired');
    event.target.classList.add('down');
}, true);

When using a mouse, the target element class is added immediately when the mouse is held down, but when using the touchscreen, the target element class is not changed when the finger is held on the element.

The strange thing is however, the console log message is sent on the down event for both the mouse click and the ts press.

Any suggestions on how to solve this ??

Thanks

EDIT

I added the touchstart event listener, but it does not fire on a touch event:

addEventListener("touchstart", function(event){ 
    cl('touch fired');
}, true);

score 17 · Answer 1 · edited Jul 22 '14 at 08:36

17

Way too late, but maybe someone else could use it:

event.target doesn't work on touchscreen, because you could use more than 1 finger, so there are more targets:

addEventListener("mousedown", function(event){  
  console.log('down fired');
  var t = /touch/.test(event.type) ? event.targetTouches[0] : event.target;
  t.classList.add('down');
}, true);

edited Jul 22 '14 at 08:36

VMAtm

27,943
17
79
125

answered Jul 22 '14 at 08:16

Ro NL

450
5
9

score 6 · Answer 2 · answered Feb 15 '13 at 02:49

6

Use touchstart and touchend events instead.

addEventListener("touchstart", function(event){  
    console.log('down fired');
    event.target.classList.add('down');
}, true);

answered Feb 15 '13 at 02:49

Code.Town

1,216
10
16

score 2 · Answer 3 · answered Feb 15 '13 at 02:46

2

Though generally a touch device does send the mouse events as expected, there are special events for touch screens. Specifically 'touchstart' as the equivalent of 'mousedown', and 'touchend'/'touchcancel' as the equivalents of 'mouseup'. If you are not checking what button or position is being touched, you can generally do a direct replacement with them.

By the way, touchend means the user stopped touching the screen. touchcancel occurs when something happens (like a non-browser alert) that intercepts the touch.

answered Feb 15 '13 at 02:46

Mark Ormston

1,836
9
13

Thanks, I added the touch event but it does not fire on a touch, but the problem is not that the event is not recognized, it is recognized as the console logs the event, but any other actions do not appear to get fired ! – crankshaft Feb 15 '13 at 02:56
If the console.log works, but not your own handler, I wonder if there is a problem on your mobile device, but it isn't reporting it to you. If you replace your action with something simple like, alert('Test');, does this go through? – Mark Ormston Feb 15 '13 at 03:16
1

Hi, thanks, this is not a mobile device, it is a embedded linux running arch linux and midori web browser. The touch screen hardware is microchip mtouch, there are no drivers, it is recognized by the O/S as a HID mouse, I think that is why the touch events are not recognized. Is it possible to break out of the mosuedown event ? – crankshaft Feb 15 '13 at 03:30
Haha... ok, that's unique. I actually don't know why it would be breaking out of the mousedown events. If other software treats it like a regular mouse, it should work, but unfortunately your set up is beyond my knowledge. – Mark Ormston Feb 15 '13 at 04:09

Touch Screen and Javascript DOM Mousedown Event

EDIT

3 Answers3

Linked