javascript - iOS Safari : 'click' event not triggerd when there is an event-listener on 'mousemove'

Question

在 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 问题，但我找不到任何有关此组合的信息。

Answer 1

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

...events arrive in this order: mouseover, mousemove, mousedown, mouseup, and click. [...] if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent

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

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

不过，我不确定为什么简单的 fiddle 中没有推迟点击事件。如今使用的算法可能更加“聪明”，可以通过评估更改内容并考虑上下文信息来确定 DOM 更改是否相关。