Question

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

在我的情况下无法使用的其他解决方案：

A simple way，虽然使用不太受支持pointer-events（2017年编辑，widely supported）
An ExtJS solution

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 Forward Mouse Event Example

Answer 4

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

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

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

不幸的是，我使用它的目的 - 在Google地图上覆盖一个遮罩并没有捕获点击和拖动事件，并且鼠标光标没有改变，这降低了用户体验，我只是决定隐藏IE下的掩码和Opera - 两个浏览器which dont support pointer events。

Answer 5

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

Answer 6

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

使用透明图像叠加div而不使用链接
使用链接构建div

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

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

我不处理一般鼠标事件，我只是处理我需要的事件。因此，它实际上是一种解决方法，而不是最佳解决方案，它可以抽象地处理每个鼠标事件，例如在检查几何体之后使用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（）'，您可以处理其他事件和元素。

要做：找出哪些鼠标事件触发工具提示超过<a title="foo">，触发（）它们，或复制显示工具提示。状态行也是如此。

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

修改2014/09

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

用户user2273627 sggested：

对于默认的工具提示和状态行，您可以使用z-index CSS属性。检查鼠标是否在链接上并设置z-index 对于那个链接。 $（本）的CSS（ 'z索引'， '9'）;鼠标时放一个别的不在元素上并将z-index设置为auto。确保你设置底层链接位置：相对于css文件，否则 z-index不起作用。

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

6 个答案: