onClick 事件是否适用于触摸屏设备上的触摸？答案

【问题标题】：Would onClick event work on touch on touch-screen devices?onClick 事件是否适用于触摸屏设备上的触摸？
【发布时间】：2016-05-17 10:10:00
【问题描述】：

我在我的网站中使用了onclick 事件。但是当我在谷歌浏览器的开发者模式的移动视图中打开它时，触摸鼠标点击的元素没有任何反应。所以我的问题是：

我是否还必须添加 ontouch 事件以及 onclick 事件，或者 onClick 事件在所有触摸屏设备上的触摸上起作用？

P.S：你可以在这里看到我所有的代码：https://github.com/SycoScientistRecords/sycoscientistrecords.github.io/

或在直播网站：http://sycoscientistrecords.github.io

不，我还没有在真机上测试过这个网站。

【问题讨论】：

我在触摸设备上从未遇到过onClick 的问题。您是否真的在带有触摸屏的真实手机/设备上尝试过这个，或者只有 Chrome 的开发者模式的移动视图？
当屏幕那么小时，也许你有另一个元素重叠并阻止点击事件？你有可以展示的例子吗？
你的代码在哪里？
@ROAL 没有我没有在真机上测试过。
@IvanBarayev 我已添加网站链接

标签： javascript html css

【解决方案1】：

onclick 在触摸屏上运行良好；我用过好几次了，从来没出过问题。

您可以考虑使用onmousedown 而不是onclick。或者使用jQuery 来检测水龙头。

【讨论】：

为什么我应该使用onmousedown 而不是onclick？
onmousedown 等价于触摸设备上的 ontouchstart，onmouseup 等价于 ontouchend。如果您还想检测拖动，您可以使用 ontouchmove，每次触摸屏幕后移动手指时都会触发它。

【解决方案2】：

onclick 可能无法在触摸设备上运行，我遇到了这个问题，ontouchstart 事件对其进行了排序。如果您使用 ontouchstart 和 onclick 手表，您不会触发两次事件。

这是另一个相关的帖子 onClick not working on mobile (touch)

【讨论】：

【解决方案3】：

我发现this detailed writeup at MDN 很有帮助。特别是：

浏览器可能触发触摸事件和鼠标事件以响应相同的用户输入[强调我的]

和

元素的触摸事件处理程序应该调用preventDefault()，并且不会调度额外的鼠标事件

因此，您的 touchstart 或 touchend 侦听器可以调用 evt.preventDefault()，而您的 mousedown / mouseup 侦听器不会触发，因为它们位于链的后面。

在 Angular 中，我可以通过将 (click)="doSomething()" 更改为 (mouseup)="doSomething(false)" (touchend)="doSomething(true); $event.preventDefault()" 来检测我是否使用鼠标或笔记本电脑的触摸屏单击了按钮。该方法使用true 调用触摸事件，false 调用鼠标事件。

【讨论】：

【解决方案4】：

New browsers 有一个pointerType，它确定onClick 是由鼠标还是通过触摸创建的。如果您只想根据输入来调整用户行为，使用pointerType 是最安全的方法。

如果您使用的是jQuery：

$(selector).click(e => {
    if (e.pointerType === "mouse") {} // mouse event
    else {} // touch event
});

如果您使用的是vanilla JS：

element.addEventListener('click', e => {
    if (e.pointerType === "mouse") {} // mouse event
    else {} // touch event
});

如果您使用React，则该事件将围绕合成事件进行包装。要访问pointerType，您必须使用反应事件的nativeEvent。这是您需要考虑的（尤其是在使用 Typescript 时）。如果事件是由鼠标触发的，原生事件是MouseEvent的实例，没有pointerType，所以，首先你需要检查原生事件的类型，它也会处理TS中的打字问题

<div
    onClick={e => { 
        if (e.nativeEvent instanceof PointerEvent && e.nativeEvent.pointerType === 'touch') {} // Touch Event
        else {} // Mouse Event
    }}
></div>

专业提示：如果您想在开发中测试触摸事件，请在this 之后使用 Chrome。请注意，Safari 具有模拟 iPhone 和 iPad 框架的响应模式。但是，即使您处于响应式设计模式并选择了 iPhone 或 iPad，Safari 也会始终注册鼠标事件。

【讨论】：