Javascript IE 鼠标事件仅限于原始接收者?
我有一个在 Chrome 和 FF 中运行良好的信息叠加层。它是一个包含表格(用于边框图像布局)和中心内容 div 的 div。我在适当的边框表格单元格上触发鼠标按下。
一旦发生这种情况,一个不同的 div 就会通过 z-index 被带到前面,并传递 mousemove 和 mouseup 事件来处理拖动信息气泡。一旦 mouseup 被触发,信息气泡就会将“事件”div 放回到原来的位置。
我还按照相同的过程拖动气泡的右下角来调整其大小。同样,在 Chrome 和 FF 中有效,但在 IE 中失败。
IE 似乎将事件触发器限制为 info div。如果鼠标设法移到 div 之外(拖动速度比事件触发/更新速度快),则信息叠加层将不再接收 mousemove 事件。但是,如果我将鼠标移回到覆盖层上(不释放按钮),它会继续接收鼠标事件。
编辑:在创建一些示例代码时(当前功能分为多个 JS 模块),它在 IE 中工作。一旦我发现我的示例代码与实际代码之间的差异,我将再次更新。
编辑/回答:(所以不会让新用户在这段时间内回答自己的问题......) 仍然不确定实际问题是什么。 (如果你问我,z-index 为 100 的 div 应该可以很好地接收鼠标事件?)
我的解决方案是修复鼠标事件处理,以便我可以将 mousemove 和 mouseup 附加到父 div (应该有对于我想要设置的所有拖动/调整大小行为,首先已经完成了。
问题是由于事件的新手方法以及在太多位置使用 stopPropagation() 导致我无法采取这种方法。 (我希望信息框中的文本等可供选择)。
我调整了代码,以便我的文本容器只需在鼠标按下时停止传播,而不是在所有鼠标事件上停止传播。
I have an info overlay that works great in Chrome and FF. It is a div containing a table (for border image layout) and then a central content div. I trigger mousedown on the appropriate border table cells.
Once this happens, a different div is brought to the front with z-index, and that passes along the mousemove and mouseup events to handle dragging the info bubble around. Once the mouseup is fired, the info bubble puts the "event" div back to where it was.
I also follow the same process for dragging the lower right corner of the bubble to resize it. Again, works in Chrome and FF, but fails in IE.
IE seems to be restricting the event triggers to the info div. If the mouse manages to move outside the div (from dragging faster then the events fire/update), the info overlay no longer receives mousemove events. However, if I move the mouse back over the overlay (without releasing the button) it continues to receive mouse events.
Edit: In creating some example code (the current functionality is split across several JS modules), it worked in IE. As soon as I find the difference between my example code and the actual code, I will update again.
Edit/Answer: (SO wont let a new user answer their own question in this time span...)
Still not sure what the actual problem was. (If you ask me, a div with a z-index of 100 should be receiving mouse events just fine?)
My solution was to fix my mouse event handling such that I could attach my mousemove and mouseup to the parent div (as should have been done in the first place) for all dragging/resizing behaviors I wanted to set up.
The problem was due to a newbie approach to the events and having stopPropagation() in too many locations preventing me from taking such an approach. (I wanted text, etc in my info box to be selectable).
I adjusted the code so that my text containers only had to stop propagation on mousedown instead of all the mouse events.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论