触摸屏和Javascript DOM Mousedown事件

Question

我有一个使用触摸屏的javascript web应用程序,浏览器是基于webkit的.

我遇到了这个问题:

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

使用鼠标时,在按住鼠标时会立即添加目标元素类,但在使用触摸屏时,当手指放在元素上时,目标元素类不会更改.

然而,奇怪的是,控制台日志消息是在鼠标单击和按下按钮的向下事件上发送的.

关于如何解决这个问题的任何建议？

谢谢

编辑

我添加了touchstart事件监听器,但它不会触发触摸事件:

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

Answer 1

太晚了,但也许其他人可以使用它:

event.target 在触摸屏上不起作用,因为你可以使用超过1个手指,因此有更多的目标:

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

请改用 touchstart 和 touchend 事件。

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

Answer 3

虽然触摸设备通常会按预期发送鼠标事件，但触摸屏有一些特殊事件。具体来说，“touchstart”相当于“mousedown”，“touchend”/“touchcancel”相当于“mouseup”。如果您不检查哪个按钮或位置被触摸，通常可以直接替换它们。

顺便说一句，touchend 表示用户停止触摸屏幕。当发生拦截触摸的事件（例如非浏览器警报）时，会发生 touchcancel。