iOS Safari：“鼠标移动”上有事件侦听器时不会触发“点击”事件答案

【问题标题】：iOS Safari: 'click' event not triggerd when there is an event-listener on 'mousemove'iOS Safari：“鼠标移动”上有事件侦听器时不会触发“点击”事件
【发布时间】：2017-09-04 09:32:55
【问题描述】：

在 iOS 的 safari 中，当元素或其祖先在 mousemove 上具有事件侦听器时，其上的 click 事件侦听器将被忽略。

<div id="el"></div>

document.getElementById("el").addEventListener("mousemove", _e => console.log("mousemove"));
document.getElementById("el").addEventListener("click",     _e => console.log("click"));

在 ios 上，从不记录点击，在 android (chrome) 或桌面浏览器上，两者都是。

有很多关于 ios 点击错误的 stackoverflow 问题，但我找不到任何关于这个组合的问题。

【问题讨论】：

此代码是您遇到此问题的实际代码吗？我试过了，对我来说效果很好。
@Mikael Lennholm，是的。（除了我更改文本而不是使用控制台日志）我使用的是 ios 版本 9.3.1
@Mikael，我在这里放了一个工作示例：jsfiddle.net/7Ld2ah10/1，如果我打开 jsfiddle 它也适用于我（单击和鼠标移动）！我将标记 + js + css 复制到我的项目中，我的代码与小提琴中的代码完全相同，但是当我从本地节点服务器打开时，我只看到记录了 mousemove。
"...除了我更改文本而不是使用控制台日志"。这是一个非常重要的区别。以下是 Apple 文档的摘录，描述了 Safari 如何使用触摸输入来模拟鼠标事件：如果页面内容在 mousemove 事件上发生更改，则不会发送序列中的后续事件 (developer.apple.com/library/content/documentation/…)
我不明白为什么它在小提琴中起作用，也许苹果用于确定更改是否相关的算法变得更加聪明，并且考虑了上下文信息。

标签： javascript safari mouseevent

【解决方案1】：

以下摘自 Apple 自己的文档，描述 iOS 上的 Safari 如何使用触摸输入来模拟鼠标事件：

...事件按以下顺序到达：mouseover、mousemove、mousedown、mouseup 和 click。 [...] 如果页面内容在 mousemove 事件上发生变化，则不会发送序列中的后续事件

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

换句话说，如果您在 mousemove 事件处理程序（而不仅仅是简单的 console.log()）中对 DOM 进行一些更改，则根据 Apple 的规范，click 事件将被推迟。
早在 iPhone 推出时，这是 Apple 处理实际鼠标指针可用于悬停效果而触摸不能用于这一事实的方式。

不过，我不确定为什么在简单的小提琴中没有延迟点击事件。可能是现在使用的算法更“聪明”了，它通过评估更改的内容并考虑上下文信息来确定 DOM 更改是否相关。

【讨论】：