CODEWITHSUNDEEP
javascriptdom
crankshaft
crankshaft

Reputation: 2677

Touch Screen and Javascript DOM Mousedown Event

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);

Upvotes: 10

Views: 29999

Answers (3)

Ro NL
Ro NL

Reputation: 460

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);

Upvotes: 18

Code.Town
Code.Town

Reputation: 1226

Use touchstart and touchend events instead.

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

Upvotes: 6

Mara Ormston
Mara Ormston

Reputation: 1856

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.

Upvotes: 2

Related Questions