javascript - 重叠元素上的指针事件

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 上触发事件？至少能够过滤掉事件(例如，在提供的示例中，mousemoves 触发 div2 并点击 div1)？

The full example can be found here.

Answer 1

是的，有点像，虽然不是很简单。您将不得不在事件处理程序中为每个触发另一个正在监听的事件的 div 使用代码。见胡安的 answer对于这个问题，他写的代码可以推广到其他事件。