我有一个在 Chrome 和 FF 中运行良好的信息叠加层。它是一个 div,包含一个表格(用于边框图像布局),然后是一个中心内容 div。我在适当的边框表格单元格上触发 mousedown。
一旦发生这种情况,一个不同的 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() 导致我无法采用这种方法。(我希望我的信息框中的文本等可以选择)。
我调整了代码,以便我的文本容器只需要在 mousedown 而不是所有鼠标事件时停止传播。