通过图层/ div转发鼠标事件

有没有人知道jQuery或本地JavaScript方式通过图层启用鼠标事件？ 例如，启用div下面的链接。

在我的情况下不能使用的其他解决方案：

• 一个简单的方法 ，虽然使用不是真正支持的pointer-events （ 编辑截至2017年， 广泛支持 ）
• ExtJS解决方案

Answer 1

你可以做到这一切，或者你可以将这个CSS用于该div：

pointer-events: none

Answer 2

我曾经做过一次。 这是代码：

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

请注意，我只针对新版本的Firefox和Chrome。

Answer 3

现在有一个ExtJS事件转发脚本的jQuery实现：

JQuery前向鼠标事件示例

Answer 4

这里给出的jQuery Forward Mouse Event示例是一个更大的框架的一部分，甚至只是从给定的网站中得出很多东西是一件苦差事。

因此我将代码重写为独立的jQuery插件。

这是Github存储库：
https://github.com/MichaelPote/jquery.forwardevents

不幸的是，我使用它的目的 – 在Google地图上覆盖蒙版并没有捕获点击和拖动事件，并且鼠标光标没有改变，这降低了用户体验，我只是决定在IE和Opera下隐藏掩码 – 两个不支持指针事件的浏览器。

Answer 5

当你将鼠标hover在div上时，你可以尝试使用jquery来改变div的z-index，这样当鼠标hover在div上时，链接暂时位于div之上。

Answer 6

由于JQuery Forward Mouse Event Example链接目前已经死了，我写了一些jQuery代码来处理一个简单的案例：

1. 使用透明图像叠加div并且没有链接
2. 带链接的底层div

目标：保持叠加可见，使链接工作，并在链接上更改光标。

方法：将鼠标位置与每个链接offset（）进行比较。

我不处理一般的鼠标事件，我只是处理我需要的事件。 因此，它确实是一种解决方法，而不是最佳解决方案，它可以抽象地处理每个鼠标事件，例如在检查几何体之后使用Wildcard上面的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); }); 

使用几何函数'mouse_event_over_element（）'，您可以处理其他事件和元素。

要做的事情：找出哪些鼠标事件触发工具提示而不是 ，触发（）它们，或复制显示工具提示。 状态行相同。

..............................

编辑2014/09

..............................

用户user2273627 sggested：

对于默认的工具提示和状态行，您可以使用z-index css-property。 检查鼠标是否在链接上并设置该链接的z-index。 $（本）的CSS（ 'z索引'， '9'）; 当鼠标hover在元素上时放置else，并将z-index设置为auto。 确保在css文件中设置基础链接position：relative，否则z-index将不起作用。