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

Answer 1

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

Answer 2

Use touchstart and touchend events instead.

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