检测 iframe 上的鼠标位置
我有一个 iframe,里面有一个 flash 剪辑,占据了整个窗口,在 iframe 外部,我有一个 div,用作 iframe 上方的菜单栏,其中有下拉菜单。
现在的挑战是让这些下拉菜单在鼠标悬停时显示,但在访问者与 flash/iframe 交互时隐藏。
我可以通过检查 document.activeElement 轻松检测是否是这种情况,但是有问题的部分是检测它们何时“不”使用 Flash。我现在所做的只是检测主窗口上的鼠标移动,然后通过调用 top.focus()
重置 activeElement,(document.activeElement.blur()
确实由于某种原因无法在 Chrome 上运行)。问题是,执行此操作后,当用户与其交互时,它不会再次将 activeElement 设置回 iframe,几乎就像 top.focus()
无限期地将 activeElement 设置为“body”。
关于我如何正确地做到这一点有什么想法吗?
简而言之,当与主窗口交互时,我需要将焦点从 iframe 上移开,然后在与 iframe 交互时将焦点设置回 iframe(这应该是浏览器的默认行为)。
谢谢
编辑:
jsFiddle 展示问题: http://jsfiddle.net/tvc3S/
请注意,没有 Flash工作正常..不确定是否有办法解决这个问题..
I have an iframe with a flash clip inside that's occupying the full window, outside the iframe I have a div that serves as a menubar above the iframe, which has dropdown menu's.
Now the challenge is to make these dropdown menu's appear on mouseover but hide when the visitor interaces with the flash / iframe.
I can easily detect whether this is the case by checking document.activeElement, however the problematic part is detecting when they "aren't" using flash. What I'm doing now is simply detecting mouse movement on the main window, then resetting activeElement by calling top.focus()
, (document.activeElement.blur()
does not work on Chrome for some reason). The problem is that after doing this it won't set the activeElement back to the iframe again when the user interacts with it, almost as if top.focus()
sets activeElement to "body" indefinitely.
Any idea's on how I can do this properly?
In a nutshell, I need to take focus away from an iframe when the main window is being interacted with, and then set focus back to the iframe when it's being interacted with (which should be the browsers default behaviour).
Thanks
Edit:
jsFiddle to showcase the problem: http://jsfiddle.net/tvc3S/
Note that without Flash it works fine.. not sure if there's a way around this..
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
天哪,我确实让事情变得比必要的复杂得多,只需检测 iframe 上的鼠标悬停和鼠标移出事件就可以完成这项工作。
http: //jsfiddle.net/89s7q/
当然,这使用悬停事件而不是焦点事件,这会带来稍微不同的体验,但这对于我正在做的事情来说很好。
Boy I sure was making things far more complicated than necessary, simply detecting mouseover and mouseout events on the iframe did the job..
http://jsfiddle.net/89s7q/
Of course this uses the hover events rather than focus events, which makes for a slightly different experience, but it's fine for what I'm doing.