用于触摸的OnMouseOver的首选替代方法

有触摸设备上处理OnMouseOver javascript事件的首选替代或最佳做法吗? 我能想到的是将所有事件转换为OnMouseClick。 不幸的是,这混淆了鼠标hover的事件和单击鼠标触发的事件之间的差异。

是否有任何替代scheme或变通方法对用户鼠标设备和触摸设备使用的网页的用户体验影响较小?

有触摸设备上处理OnMouseOver javascript事件的首选替代或最佳做法吗?

最简洁的答案是不。

特定于设备的事件与其他设备的事件之间没有1:1映射。 使用Touch时没有适当的“hover”。

鼠标事件( mouseovermouseoutmousedownmouseupmousemove等)是鼠标input设备特有的。 键盘有keydown按键和键盘。 触摸有touchstarttouchmovetouchendtouchcancel 。 iPhone / iPad /等的Webkit具有额外的手势开始/移动/结束事件是苹果专用的。

其中一个事件可以触发更高级别的通用事件,如焦点模糊点击提交等。 例如, 点击事件可以使用鼠标,触摸或键盘事件来触发。 ( 点击 ,顺便说一句,是一个不适当的名称,这应该更正确地称为行动,但由于其鼠标的历史仍被称为点击 )的事件。

首选(或“一个网站”)方法是使用鼠标事件鼠标特定的东西,你不能避免它们,并坚持一切事件的一般事件。

根据WebKit构build和构build它的标志,在某些特殊情况下 ,您可以在某些Touch界面上触发某些鼠标事件 ,但是您并不想在此基础上构buildUI,因为这些情况存在的唯一原因是允许mobile-Webkit在市场上获得牵引力。

触摸事件在各个平台上也不一致。 如果你正在做任何移动/触摸的东西,请看看ppk的工作,以供参考。http://quirksmode.org/mobile/tableTouch.html

onmouseover / onmouseout javascript事件会转化为touchenter / touchleave touch事件,问题是这些事件刚刚开始在浏览器中实现(它们是W3C草案的一部分),目前只有Firefox 支持它 ,所以如果你正在使用webkit,你将不得不等待它,或者使用touchmove事件实现你的onmouseover特性,看看坐标,看它们是否与你html元素的坐标重叠。

根据您的需求和目标用户,您可能对移动Safari和Chrome上可用的JS API(至less)感兴趣。 检查http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html ,以获得快速(也许有点过时)介绍。 我没有真正使用这些广泛的(例如只针对iPhone),但我已经非常高兴,迄今为止得到的结果。

我想通过结合“touchmove”事件处理程序和调用使用坐标的elementFromPoint()方法(存储在客户端的clientX / clientY属性中),我创build了一个很好的模拟(至less对于我想要模拟的特定事件处理程序)对象)在事件(我使用e.touches [0])的相关触摸对象。

有关更详细的答案,请参阅我对此用户特定用例的回答(填充表格的单元格),这是基于我自己的问题的解决scheme(切换checkbox状态): https : //stackoverflow.com/a/31711040/ 1941313 。

或者,阅读我写的有关查找写事件处理程序devise的完整报告,其中包括我的发现的来源,请参阅以下要点: https : //gist.github.com/VehpuS/6fd5dca2ea8cd0eb0471

(我会贴在他们的计算器,但我的代表太低了,所以我只能提供两个链接:P)

希望这可以帮助!