使用Javascript防止来自Mobile Safari/iPhone中的触摸事件的鼠标仿真事件(即单击)

Question

在此过程中使用交互式的DOM元素的单个页面的JavaScript应用程序,我发现了" mouseover-mousemove-mousedown-mouseup-click"序列一切发生在一堆后的" touchstart-touchmove-touchend"事件顺序.

我还发现,可以mouse*-click通过event.preventDefault()在touchstart事件期间执行" " 来防止" "事件发生,但仅在此期间,而不是在touchmove和期间touchend.这是一个奇怪的设计,因为在此期间无法知道touchstart用户是想要拖动还是滑动或只是点击/点击该项目.

我最终设置了一个与时间戳相关的"ignore_next_click"标志,但这显然不是很干净.

有没有人知道更好的方法,或者我们错过了什么？

请注意,虽然"点击"可以被识别为" touchstart-touchend"序列(即没有" touchmove"),但是某些事情,例如键盘输入焦点,只能在适当的click事件期间发生.

Answer 1

只是阻止touchend事件。当您触摸元素时，它将允许浏览器滚动页面，但不会使其发出人为的鼠标事件。

element.addEventListener('touchend', event => {
  event.preventDefault();
});

Answer 2

我在制作跨平台 HTML5/JS 应用程序时遇到了类似的问题。对我来说唯一真正的答案是在触摸事件上防止默认，并根据我的逻辑实际管理触摸状态和触发点击、拖动等事件。这听起来比实际更令人生畏，但模仿的点击/鼠标事件在大多数移动浏览器上都能完美运行。

单击和额外的鼠标序列都是为了您的方便（和兼容性）。我的经验法则 - 如果它是为了您的方便但不方便，最好杀死它。

至于输入框，他们只需要 touchend 事件。我已经杀死了点击/鼠标事件，并且仍然能够让移动浏览器正确响应输入的触摸。如果它仍然给您带来问题，您可以修改事件处理程序以仅抑制非输入事件：

function touchHandler(event) {
    var shouldIgnore = event.target != null 
          && ( event.target.tagName.toLowerCase() == "input" || event.target.tagName.toLowerCase() == "textarea" );

    if(!shouldIgnore) e.preventDefault();
}