处理元素后面的鼠标事件答案

【问题标题】：Handling Mouse Events Behind An Element处理元素后面的鼠标事件
【发布时间】：2011-08-31 03:18:28
【问题描述】：

我正在使用 Mootools 实现拖放界面，其中创建了被拖动元素的幽灵副本并随鼠标移动。我希望用户能够在按住这个幽灵元素的同时使用鼠标滚轮滚动。问题是幽灵本身正在吸收鼠标滚轮事件，导致它不能滚动它后面的页面（在这种情况下，是一个带有滚动条的特定 div）。

在 Firefox 中，我通过将“pointer-events: none”样式应用于幽灵来解决此问题，这会导致鼠标滚轮事件像我想要的那样直接通过。但似乎我需要一个不同的 IE 解决方案。我计划在幽灵元素上捕获鼠标滚轮事件并将它们转发到容器 div，但我似乎无法让新事件触发标准鼠标滚轮行为（即滚动 div）。有谁知道我如何做到这一点？

这是我所说的一个非常基本的例子：http://jsfiddle.net/jqL8Z/3/

请注意，如果您将鼠标滚轮悬停在“拖动元素”上，则页面不会滚动。这是因为滚动是主 div 溢出的一部分，而拖动框不是该 div 的成员，因此它的鼠标事件将冒泡到主体。我不想让它成为 div 的成员，因为当拖到该 div 之外时它会变得不可见。

我尝试了以下代码来捕获和重定向事件：

textClone.addEvent('mousewheel', function(e) {
        var mouseWheelEvent = document.createEvent('MouseEvents');
        mouseWheelEvent.initMouseEvent('mousewheel', true, true, window, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget);
        treeDiv.dispatchEvent(mouseWheelEvent);
    });

但运气不好，还是少了点什么。

【问题讨论】：

ppointer-events 也许？
我不明白，我可以使用 sortables，拖动一个项目，然后在没有任何约束的情况下鼠标滚轮页面，直到我找到放置它的位置。 jsfiddle.net/dimitar/Wzrt7
我应该澄清这是我正在拖动的 div 元素，所以这可能就是它阻止鼠标滚轮事件的原因。我想使用更简单的元素作为幽灵可能是一种选择。
你应该建立一个你自己的 jsfiddle - 这完全取决于你如何构建你的拖动以及你注入元素的位置，也许委派可能与一些 element.scrollTo 位一起工作 - 但在你之前这都是理论上的显示一些代码。
好的，我添加了一个最基本的示例来说明我在说什么。我错了 div 元素，实际上是因为元素层次结构。

标签： javascript events mootools mouse

【解决方案1】：

通过调用页面的鼠标滚轮事件来响应 div 的鼠标滚轮事件可能会实现您的目标。

【讨论】：

这基本上就是我想要做的，但 fireEvent() 只触发自定义处理程序。似乎 dispatchEvent() 可以做到，但它不适合我，我更新了一个例子。

【解决方案2】：

我最终做的是更改我的拖放逻辑以将幽灵 div 保持在鼠标的一侧而不是鼠标下方。这样它就不会捕获任何鼠标事件。

【讨论】：