iPad Safari 将鼠标事件映射到图像映射中的触摸事件答案

【问题标题】：iPad Safari's mapping of mouse events to touch events in image-mapsiPad Safari 将鼠标事件映射到图像映射中的触摸事件
【发布时间】：2011-02-27 02:00:31
【问题描述】：

我的网站广泛使用图像地图。这些图像是中世纪手稿的页面。 AREA 标记的 mouseOver 事件附有一个工具提示，它显示了鼠标悬停所在行的古代脚本的现代印刷转录。

我刚刚在 Apple 商店的 iPad 上查看了我的网站。 iPad 在许多方面使用起来很有趣，但是，我想知道 Apple 将鼠标事件映射到手指触摸事件。苹果可能有充分的理由这样做，但他们的选择对我来说似乎违反直觉且过于复杂。

具体来说，iPad Safari 浏览器显然同时响应了 fingerDown 和 fingerTap，而且方式不同。当我点击图像地图的一个区域时，会显示连接到 AREA 标记的鼠标悬停事件的工具提示，并且在我点击其他地方之前一直保持可见。当我将手指放在图像地图的某个区域上时，该区域改变了颜色。因此，如果 iPad Safari 检测到 mouseOver 事件处理程序，它会在 click|tap 上执行 mouseOver 代码，并且显然会阻止“click”事件传播，所以如果您还有一些连接到 click 事件的东西，它就不起作用？对吗？

但更重要的是，为什么没有在 iPad-Safari 上对应 mouseOver 的 fingerDown 呢？在映射 mouseOver 事件时，FingerDown 似乎比 Tap 更有可能。我原以为事情会以这种方式映射：

 MouseClick : FingerTap (i.e. finger down and then immediately up)
 MouseOver : FingerDown (finger down and stays on the spot)

如果 Apple 将 fingerDown 视为 mouseOver 的对应项，则工具提示可以在 FingerDown 上显示并在 fingerUp 上再次不可见，这将是 mouseOut 的对应项。

也许有人可以启发我了解导致 Apple 产生这些特定鼠标触摸事件映射的思考过程？谢谢

【问题讨论】：

标签： events ipad safari tooltip imagemap

【解决方案1】：

我一直在研究 iPad 何时触发“鼠标悬停”事件与“点击”事件。当用户点击页面上的任意位置时，iPad 首先触发“鼠标悬停”事件，就好像用户刚刚将鼠标光标放在该位置一样。它还在最后一个具有焦点的元素上触发“mouseout”事件。然后，据我所知，浏览器会检查是否由于“鼠标悬停”事件回调而发生了对 DOM 的任何更改。

如果 DOM 发生变化，浏览器不会触发“点击”事件。如果用户第二次点击同一个元素，浏览器会触发“点击”事件，但不会触发另一个“鼠标悬停”事件。

另一方面，如果用户第一次点击一个元素，并且在“鼠标悬停”事件完成后 DOM 没有改变，那么浏览器会触发一个“点击”事件而无需等待第二次点击。

【讨论】：

【解决方案2】：

我确实找到了一些可以部分解释上述行为的信息：

https://developer.apple.com/library/content/technotes/tn2010/tn2262/_index.html

请参阅第 5 节，尤其是。

似乎触摸+按住正在“选择”图像映射区域。上面的链接说可以禁用用户选择，但它没有说明在禁用用户选择的元素上使用触摸+按住手势时会发生什么。如果能在那种情况下成为mouseOver的对应物就好了。

【讨论】：