iPad Safari将鼠标事件映射到图像映射中的触摸事件 [英] iPad Safari's mapping of mouse events to touch events in image-maps

问题描述

我的网站广泛使用图片地图。图像是中世纪手稿的页面。 AREA标签的mouseOver事件具有附加的工具提示，它显示鼠标悬停的线的古老脚本的现代排版转录。

My website makes extensive use of image-maps. The images are of pages from a medieval manuscript. The mouseOver event of the AREA tags has a tooltip attached to it, which displays a modern typographic transcription of the ancient script for the line the mouse is hovering over.

我刚刚在苹果商店的iPad上检查过我的网站。 iPad在许多方面是一种喜悦，但是我想知道苹果公司将鼠标事件映射到手指触摸事件。苹果可能有很好的理由像他们做的一样，但他们的选择似乎违反直觉，对我来说过于复杂。

I just checked my website out on the iPad at the Apple store. The iPad is in many respects a joy to use, however, I am wondering about Apple's mapping of the mouse-events to the finger-touch events. Apple probably had a good reason for doing things as they did, but their choices seem counterintuitive and overly complicated to me.

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

Specifically, the iPad Safari browser clearly was responding to both fingerDown and fingerTap, and in different ways. When I tapped an area of the image-map, the tooltip wired to the mouse-over event of the AREA tag was displayed, and remained visible until I tapped somewhere else. When I held my finger down on an area of the image-map, the area changed color. So if iPad Safari detects a mouseOver eventhandler, it executes the mouseOver code on the click|tap and apparently prevents the "click" event from propagating, so that if you also have something wired to the click event, it doesn't work? Is that right?

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

But more importantly, why isn't fingerDown the iPad-Safari counterpart for mouseOver? FingerDown seems a more likely candidate than Tap when mapping the mouseOver event. I would have expected things to be mapped in this way:

 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的对应。

If Apple had treated fingerDown as the counterpart to mouseOver, then the tooltip could be displayed upon FingerDown and made invisible again on fingerUp, which would be the counterpart to mouseOut.

也许有人可以启发我的想法苹果向这些特定的鼠标触摸事件映射的过程？
谢谢

Perhaps someone could enlighten me about the thinking process that led Apple to these particular mouse-to-touch event-mappings? Thanks

推荐答案

我一直在做一些研究，特别是当iPad触发鼠标悬停事件与点击事件。当用户点击页面上的任何位置时，iPad首先触发鼠标悬停事件，就像用户刚刚将鼠标光标放在该位置一样。它还在最后一个焦点元素上激发mouseout事件。然后，就浏览器而言，检查DOM的任何更改是否因mouseover事件回调而发生。

I have been doing some research on specifically when the iPad fires "mouseover" events versus "click" events. When the user taps anywhere on the page the iPad first fires a "mouseover" event as though the user had just placed a mouse cursor on that spot. It also fires a "mouseout" event on the last element that had focus. The browser then, as far as I can tell, checks whether any changes to the DOM occurred as a result of "mouseover" event callback.

如果发生更改到DOM浏览器不会触发点击事件。如果用户第二次点击相同的元素，浏览器会点击点击事件，但不会触发另一个鼠标悬停事件。

If there has been a change to the DOM the browser does not fire a "click" event. If the user taps on the same element a second time the browser does fire a "click" event but does not fire another "mouseover" event.

另一方面，如果用户首次点击元素，并且在鼠标悬停事件完成后，DOM没有更改，则浏览器将触发点击事件，而无需等待第二次点击。

On the other hand, if after the user taps on an element for the first time and the DOM has not changed after the "mouseover" event completes, then the browser fires a "click" event without waiting for a second tap.

这篇关于iPad Safari将鼠标事件映射到图像映射中的触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！