修改

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发生在触发触摸的事件发生时（如非浏览器警报）。

触摸屏和Javascript DOM Mousedown事件

修改

3 个答案: