通过层/ div 转发鼠标事件

Question

有没有人知道使用jQuery或本地JavaScript的方法来启用层间的鼠标事件？例如，启用

下链接的点击事件。

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

• 一种简单的方法，但它使用的pointer-events目前并不是真正被支持的(编辑截至2017年，已被广泛支持)
• 一个ExtJS解决方案

- davivid

Answer 1

你可以选择以上所有操作，或者只需使用此CSS来处理该div： < p > pointer-events: none

- Anubhav Gupta

---

解决Internet Explorer的问题有点棘手，您可以在这里找到答案。 - Anubhav Gupta

供参考：IE11似乎支持此属性，这对我们有些帮助。 - Topher Fangio

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 dispatch the same event without copying it. eh.
        };

请注意，我只针对Firefox和Chrome的新版本进行了目标定位。

- wildcard

---

这应该是正确的答案。我在使用SVG覆盖在画布上时遇到了这个问题。没有任何其他东西（库、CSS或其他）可以解决这个问题，而且上面的这段代码是唯一完美运行的东西！向您致敬，亲爱的先生，谢谢！ - Ælex

我还添加了 && (!event.repeat)。 - Vlad Mysla

你会如何应用这个？ - jmchauv

我也有点困惑如何实现这个。能有人解释一下（或演示）吗？ - birgersp

我将target替换为event.target后，出现了“dispatchEvent不是一个函数”的错误。 - a1an

Answer 3

现���有一个jQuery版本的ExtJS事件转发脚本实现: JQuery前向鼠标事件示例

- Donal

---

那个页面上forwardMouseEvents()的下载链接或脚本在哪里？ - ProblemsOfSumit

失效的链接...不确定它有多少用处（更新链接使用wayback machine）。 - Alexei Levenkov

Answer 4

这里提供的jQuery Forward Mouse Event example是一个较大框架中的一部分，从给定的网站中甚至只能找出这个点。因此，我重新编写了独立的jQuery插件。

以下是Github代码库:
https://github.com/MichaelPote/jquery.forwardevents

遗憾的是，我使用它的目的——在Google Maps上覆盖遮罩并不能捕获点击和拖动事件，并且鼠标指针也没有改变，这会降低用户体验，因此我决定将在IE和Opera两个浏览器下隐藏掉这个遮罩——这两个浏览器不支持指针事件。

- Mikepote

Answer 5

你可以尝试使用jQuery来改变div的z-index，当你悬停在div上时，链接暂时处于div之上。

- Seth Archer Brown

Answer 6

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

1. 使用透明图像和没有链接的覆盖层div
2. 使用链接的底层div

目标：保持覆盖层可见，使链接正常工作，并在鼠标悬停在链接上时更改光标。

方法：将鼠标位置与每个链接的offset()进行比较。

我不处理一般的鼠标事件，只是按需处理所需的事件。因此，这实际上是一个解决方法，而不是最佳解决方案，最佳解决方案会抽象地处理每个鼠标事件，例如在检查几何形状后使用通配符的above 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建议：

对于默认的工具提示和状态栏，您可以使用z-index css属性。检查鼠标是否悬停在链接上，并设置该链接的z-index。$(this).css('z-index','9'); 当鼠标不悬停在元素上时，放置一个else并将z-index设置为auto。确保在css文件中设置底层链接的position: relative，否则z-index将无法工作。

- kitchin