iOS Safari：“ mousemove”上有事件监听器时不会触发“ click”事件

Question

on safari in iOS when an element or an ancestor of it has an event listener on mousemove then the click event listener on it is ignored.

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

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

on ios the click is never logged, on android (chrome) or desktop browsers, both are.

there are dozens stackoverflow questions regarding ios click bugs, but i couldn't find any about this combination.

Answer 1

The following is an excerpt from Apple's own document describing how Safari on iOS uses touch inputs to emulate mouse events:

...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

In other words, if you do some alteration to the DOM in your mousemove event handler (and not just a simple console.log() ), the click event will be deferred, according to Apple's spec.
Back when the iPhone was introduced, this was Apple's way of dealing with the fact that an actual mouse pointer can be used for hover effects while a touch can not.

Though, I'm not sure why the click event isn't deferred in the simple fiddle. It could be that the algorithm used is more "clever" these days and determines if a DOM alteration is relevant by assessing what changed and factoring in contextual information.