javascript - 在初始悬停触发点击后,有没有办法解决 "reset"移动 Webkit 的伪悬停行为?

标签 javascript dom-events mobile-safari touchscreen

我在一个网站上工作,我在其中使用 Javascript(通过 JQuery)添加弹出框,其中包含列表中项目的额外信息。我正在使用 JQuery 的 mouseenetermouseleave 事件来使弹出窗口出现和消失,这在桌面浏览器中当然一切正常。

在 Mobile Safari 中,当我点击一个项目时弹出窗口出现(这是我所期望的,也是我想要发生的)并且我添加了一个 ontouchstart 来触发 mouseleave JQuery 事件从而在用户执行任何其他操作时隐藏任何可见的弹出窗口。这也很好用,除了当用户点击他们刚刚查看并取消的弹出窗口时(通过滚动或通过执行任何其他触发 ontouchstart 事件的操作),而不是而不是再次显示弹出窗口,它会激活附加到该项目的链接。

如果用户点击另一个项目而不是再次点击同一个项目,那么将显示新项目的弹出窗口,然后如果他们再次点击第一个项目,则将显示该项目的弹出窗口。同样,这既是预期的也是我希望发生的。

似乎一旦带有悬停事件的项目被点击并且 Mobile Safari 被迫使该事件发生,该项目就会被标记为已触发其悬停事件,因此下一次点击不会有假装是一个悬停,它可以是一个正常的点击。用悬停事件点击另一个项目似乎“重置”了为前一个项目设置的标志。

我希望能够为自己“重置”此标志,而不是当前的工作方式,即单击某个项目会显示弹出窗口,然后再单击该项目,即使弹出窗口已关闭,将激活链接,而不是当我用我的 ontouchstart 关闭弹出窗口时,所以在我看来,该项目不再“悬停”,第二次点击相同的item 应该再次显示弹出窗口,然后只有在弹出窗口可见时单击该项目才能激活链接。

当我使用 ontouchstart 触发 mouseleave 时, secret 似乎在于让 Mobile Safari 退出其“伪悬停”模式,但我一直无法找到当 Mobile Safari 假装悬停在任何地方以及是否可以通过 Javascript 事件访问其中任何内容时,任何有用的地方到底发生了什么。

我知道我可以编写一个专门用于 Mobile Safari 的弹出代码版本,但让浏览器完成大部分模拟悬停事件的艰苦工作对我来说似乎更有效。如果我能解决这个最后的小问题就好了。

最佳答案

我猜悬停状态与哪个元素具有焦点有关,而不是作为标志。轻按一次获得焦点,第二次轻按激活链接。

尝试通过给予另一个元素焦点来关闭弹出窗口,看看效果是否更好。

$('body').focus();

关于javascript - 在初始悬停触发点击后,有没有办法解决 "reset"移动 Webkit 的伪悬停行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4280079/

相关文章:

javascript - flotr2 - 单击时更改点颜色

javascript - Firefox 在禁用输入时直接通过 DOM 根传播上下文菜单事件

javascript - Dojo Mobile ComboBox 下拉列表在 iOS8/Safari 中错位

html - 如何为移动访问者呈现桌面 View 但仍可缩放?

iphone - 多页面 webview

javascript - AngularJS 纯文本解析与一些简单的规则

javascript - IE 中的 CSS 3 文本阴影

javascript - Jquery,将类添加到创建的元素

javascript - 如何在 JavaScript 中注册嵌套脚本标记附加的回调

javascript - 如果 DOM 发生变化,你会怎么做?