重叠元素上的指针事件

Question

假设我有两个重叠的div，以及以下jQuery代码段：

$( "#div1" ).click(function() {
  console.log('click on div1');
});

$( "#div2" ).mousemove(function() {
  console.log('mousemove on div2');
});

据我所知，在这种情况下，只有一个div接收事件 - 在HTML中定义的最新事件，或者在我的情况下具有最高的z-index，div2。

通过谷歌搜索我发现如果div2用pointer-events: none设置风格，事件可以传播到div1。这使得div2对任何鼠标事件都完全没有响应。

但是可以在两个div上触发事件吗？至少能够过滤掉事件（例如，在提供的示例中，有鼠标移动触发div2并单击div1）？

The full example can be found here.

Answer 1

是的，虽然它不是非常简单。您必须在事件处理程序中为每个触发另一个正在侦听的事件的div使用代码。请参阅Juan的answer这个问题，他写的代码可以推广到其他事件。