Touch Screen and Javascript DOM Mousedown Event

Question

I have a javascript web application that uses touch screen, browser based on webkit.

I have a problem with this:

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

When using the mouse, the target element class is added immediately when the mouse is held, but when using the touch screen, the target element class does not change when the finger is held on the element.

The strange thing is, however, the console log message is dispatched in the down event for a mouse click and press ts.

Any suggestions on how to solve this?

thanks

EDIT

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

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

Answer 1

Too late, but maybe someone can use it:

event.target does not work on the touch screen because you can use more than one finger, so there are more goals:

 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 tap events.

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

Answer 3

Although typically a touch device does indeed send mouse events, as expected, there are special events for touch screens. In particular, "touchstart" as the equivalent of "mousedown" and "touchhend" / "touchcancel" as equivalents to "mouseup". If you do not check which button or position is touched, you can generally make a direct replacement with them.

By the way, touchhend means that the user stops touching the screen. touchcancel occurs when something happens (for example, a non-browser warning) that intercepts a touch.