<a>上的jQuery悬停事件在移动设备上标记 [英] jQuery hover event on <a> tag on mobile devices

问题描述

jQuery .hover() 事件似乎在移动设备上运行良好(在 iOS 5.1 Safari 上测试)，只要它不在锚元素上.工作正常意味着它将触发绑定在其上的悬停处理程序.

The jQuery .hover() event seems to work fine on mobile devices (testing it on iOS 5.1 Safari) as long as it's not on a anchor element <a>. Work fine means it will trigger the hover handler that is bound on it.

但是，当悬停事件发生在 上时，浏览器会被重定向到来自 href 的 URL.

But, when the hover event is on <a>, the browser is redirected to the URL from href instead.

我希望它在第一次触摸时首先悬停(运行事件处理程序)，然后在第二次触摸时被重定向(触发点击).有没有办法做到这一点?

I want it to hover first on first touch (run the event handler) before it's being redirected (trigger the click) on second touch. Is there any way of doing this?

推荐答案

您必须向链接添加一个事件处理程序，以更改有关 DOM 的某些内容(例如切换类以更改背景颜色等)

You must add an event handler to the link that changes something about the DOM (like toggling a class to change background colors, etc.)

来自 移动 Safari 文档:

鼠标事件的传递顺序与您在其他网络中期望的顺序相同图 6-4 所示的浏览器.如果用户点击不可点击的元素，不生成事件.如果用户点击一个可点击的元素，事件按以下顺序到达:鼠标悬停，鼠标移动，鼠标按下，鼠标向上，然后单击.mouseout 事件仅在用户点击时发生另一个可点击的项目.此外，如果页面内容在mousemove 事件，不会发送序列中的后续事件.此行为允许用户点击新内容

Mouse events are delivered in the same order you'd expect in other web browsers illustrated in Figure 6-4. If the user taps a nonclickable element, no events are generated. If the user taps a clickable element, events arrive in this order: mouseover, mousemove, mousedown, mouseup, and click. The mouseout event occurs only if the user taps on another clickable item. Also, if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent. This behavior allows the user to tap in the new content

这篇关于<a>上的jQuery悬停事件在移动设备上标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！