处理元素后面的鼠标事件

发布于 2024-11-30 22:36:56 字数 1024 浏览 1 评论 0原文

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

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

这是我正在谈论的一个非常基本的示例： http://jsfiddle.net/jqL8Z/3/< /a>

请注意，如果您将鼠标滚轮放在“拖动元素”上，页面不会滚动。这是因为滚动是主 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);
    });

但运气不佳，仍然缺少某些内容。

原文

I'm implementing a drag and drop interface using Mootools, where a ghost copy of the dragged element is created and moves around with the mouse. I want the user to be able to use the mousewheel to scroll while holding this ghost element. The problem is that the ghost itself is absorbing the mousewheel event, causing it not to scroll the page behind it(in this case, a particular div with a scroll bar).

In Firefox I fixed this by applying the "pointer-events: none" style to the ghost, which causes the mousewheel event to pass right through like I want. But it seems I need a different solution for IE. I was planning on catching mousewheel events on the ghost element and forwarding them to the container div instead, but I can't seem to make the new event trigger the standard mousewheel behavior(i.e. scroll the div). Does anyone know how I can accomplish this?

Here's a very basic example of what I'm talking about: http://jsfiddle.net/jqL8Z/3/

Note that if you mousewheel over "Dragging Element", the page doesn't scroll. This is because the scrolling is part of the main div's overflow, whereas the drag box is not a member of that div so its mouse events will bubble up to the body instead. I don't want to make it a member of the div because then it goes invisible when dragging outside that div.

I've tried the following code to catch and redirect the event:

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);
    });

But no luck, something's still missing.

分享到QQ

分享到微博