Javascript 通过图层/div 转发鼠标事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3015422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Forwarding Mouse Events through layers/divs
提问by davivid
Does anybody know of either a jQuery or native JavaScript way to enable mouse events through layers? e.g. enable a link underneath a div.
有人知道通过层启用鼠标事件的 jQuery 或原生 JavaScript 方式吗？例如，启用 .a 下的链接div。
Other solutions that cannot use in my case:
在我的情况下无法使用的其他解决方案：
- A simple way, although using not really supported
pointer-events(editas of 2017, widely supported) - An ExtJS solution
- 一个简单的方法，虽然使用并不真正支持
pointer-events（截至 2017 年编辑，广泛支持） - ExtJS 解决方案
回答by Anubhav Gupta
You can do all that or you can just use this CSS for that div:
你可以做所有这些，或者你可以只为那个 div 使用这个 CSS：
pointer-events: none
pointer-events: none
回答by wildcard
I did it once. Here's the code:
我做过一次。这是代码：
quickDelegate = function(event, target) {
var eventCopy = document.createEvent("MouseEvents");
eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail,
event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey,
event.shiftKey, event.metaKey, event.button, event.relatedTarget);
target.dispatchEvent(eventCopy);
// ... and in webkit I could just dispath the same event without copying it. eh.
};
please note that I was only targeting new versions of Firefox and Chrome.
请注意，我只针对新版本的 Firefox 和 Chrome。
回答by Donal
There is now a jQuery implementation of the ExtJS event forwarding script:
现在有一个 ExtJS 事件转发脚本的 jQuery 实现：
回答by Mikepote
The jQuery Forward Mouse Event examplegiven here is part of a larger framework and even just figuring that much out from the given website was a chore.
此处给出的jQuery Forward Mouse Event 示例是更大框架的一部分，即使只是从给定的网站中找出这么多也是一件苦差事。
I therefore rewrote the code as a standalone jQuery plugin.
因此，我将代码重写为独立的 jQuery 插件。
Here's the Github repository:
https://github.com/MichaelPote/jquery.forwardevents
这是 Github 存储库：https:
//github.com/MichaelPote/jquery.forwardevents
Unfortunately, the purpose I was using it for - overlaying a mask over Google Maps did not capture click and drag events, and the mouse cursor does not change which degrades the user experience enough that I just decided to hide the mask under IE and Opera - the two browsers which dont support pointer events.
不幸的是，我使用它的目的 - 在谷歌地图上覆盖一个蒙版并没有捕获点击和拖动事件，并且鼠标光标不会改变这会降低用户体验，以至于我决定在 IE 和 Opera 下隐藏蒙版 -不支持指针事件的两个浏览器。
回答by Seth Archer Brown
You could try using jquery to change the z-index of the div when you hover over it, so that the link is temporarily above the div while hovering over said div.
当您将鼠标悬停在 div 上时，您可以尝试使用 jquery 更改该 div 的 z-index，以便在将鼠标悬停在该 div 上时，链接暂时位于 div 上方。
回答by kitchin
Since the JQuery Forward Mouse Event Examplelink is currently dead, I wrote some jQuery code to handle a simple case:
由于JQuery Forward Mouse Event Example链接目前已经失效，我写了一些 jQuery 代码来处理一个简单的案例：
- overlay div with a transparent image and no links
- underlay div with links
- 用透明图像和无链接覆盖 div
- 带有链接的底层 div
Goal: keep overlay visible, make links work and cursor change when over a link.
目标：保持覆盖可见，使链接工作并在链接上更改光标。
Method: compare the mouse location to each link offset().
方法：将鼠标位置与每个链接 offset() 进行比较。
I don't handle general mouse events, I just treat the events I need ad-hoc. So it's really a workaround instead of the best solution, which would handle every mouse event abstractly, something like using Wildcard's above quickDelegate() after checking the geometry. Also I only care about certain link elements, not the whole layered DOM.
我不处理一般的鼠标事件，我只处理我需要临时的事件。所以这真的是一种解决方法，而不是最好的解决方案，它会抽象地处理每个鼠标事件，就像在检查几何后使用通配符上面的 quickDelegate() 一样。另外我只关心某些链接元素，而不是整个分层的 DOM。
function mouse_event_over_element(evt, elem) {
var o= elem.offset();
var w= elem.width();
var h= elem.height();
return evt.pageX >= o.left && evt.pageX <= o.left + w && evt.pageY >= o.top && evt.pageY <= o.top + h;
}
$(overlay_selector).click(function(e){
$(underlay_selector + ' a').each(function() {
if (mouse_event_over_element(e, $(this))) {
// $(this).click(); // trigger a jQuery click() handler
// quickDelegate(e, this); // not in IE8
// this.click(); // maybe not in Mozilla pre-HTML5
window.location.href= this.href;
return false;
}
});
});
$(overlay_selector).mousemove(function(e){
var newcursor= 'default';
$(underlay_selector + ' a').each(function() {
if (mouse_event_over_element(e, $(this))) {
newcursor= 'pointer';
// $(this).mouseenter(); // trigger a one-argument jQuery hover() event (no mouseleave)
return false;
}
});
$(overlay_selector).css('cursor', newcursor);
});
Using the geometry function 'mouse_event_over_element()' you can handle other events and elements.
使用几何函数“mouse_event_over_element()”，您可以处理其他事件和元素。
To do: figure out what mouse events trigger the tooltip over <a title="foo">, and trigger() them, or replicate showing the tooltip. Same for the status line.
要做：找出哪些鼠标事件触发了工具提示<a title="foo">，并 trigger() 它们，或复制显示工具提示。状态行也一样。
..............................
……………………………………………………………………………………………………………………………………………………………………………………
Edit 2014/09
编辑 2014/09
..............................
……………………………………………………………………………………………………………………………………………………………………………………
User user2273627 sggested:
用户 user2273627 sggested：
For the default tooltip and status-line you can use the z-index css-property. Check if the mouse is over a link and set the z-index for that link. $(this).css('z-index','9'); Put an else when the mouse is not over an element and set the z-index to auto. Make sure you set the underlying links position: relative in the css-file, otherwise z-index will not work.
对于默认工具提示和状态行，您可以使用 z-index css-property。检查鼠标是否在链接上并为该链接设置 z-index。$(this).css('z-index','9'); 当鼠标不在元素上时放置一个 else 并将 z-index 设置为 auto。确保在 css 文件中设置了底层链接 position: relative ，否则 z-index 将不起作用。
