如何在重叠的html元素上启用javascript鼠标事件？

这可能无法完成，但我在页面主体的内联html顶部有一个固定位置的div。内联html有可单击的元素，固定div有一个悬停事件

固定元素是空div，因此不可见

当前，固定元素正在阻止其下项目的单击事件

可能吗

这个解决方案太复杂了

可能的解决方案？

---

Thx

除非停止事件传播，否则不应使用固定元素来阻止其下项目的单击

看这把小提琴： --它演示了在没有event.stopPropagation的情况下，事件应该被span元素上的侦听器截获

$('#click-me').on('click', function (e) {
    console.log('click triggered');
});

$('.box').on('mouseover', function (e) {
    //don't stop event from bubbling
    console.log('hover triggered');
});

---

您还可以包含一段代码片段来演示您的问题吗？

尽管IE10不支持，但您可以使用它

pointer-events: none;

在这个提琴中，您可以看到一个下拉列表被其他元素覆盖，其他元素有指针事件：无，因此您可以单击向下箭头按钮，而单击实际上会转到选择元素本身

比尔，

---

Saar

您也可以尝试使用

z-index

。根据您的布局，它可能不是一个解决方案，但如果您的前端

div

不可见，则不会产生不必要的效果。例如：

document.querySelector（“#下”）.addEventListener（'click'，函数（e）{
e、 target.style.color=“蓝色”；
});
document.querySelector（“#notunder”）.addEventListener（'click'，函数（e）{
e、 target.style.color=“蓝色”；
});
#修复{
宽度：60px；
高度：200px；
位置：固定；
z指数：-1；
顶部：0px；
边框：1px纯黑；
}
#在{
显示：内联；
}
#固定锌指数{
宽度：100px；
高度：200px；
位置：固定；
左：75px；
顶部：0px；
边框：1px纯黑；
}
#不低于{
显示：内联；
}

可点击
不可点击
不确定这是OP的问题。跨度在div中，事件在DOM中向上传播，这是完全正常的。问题是块元素的绝对位置位于非祖先元素之上，因此事件会通过覆盖元素及其祖先（不包括底层元素）冒泡，因此无法获取鼠标事件。看朱利安·格雷戈尔的回答有趣的是，这比我解释的问题要严重得多。谢谢你的澄清。我意识到我只想要两层上的所有事件。还寻求非jquery解决方案。谢谢！如果指针事件：无；阻止该层上的所有事件，但不起作用。实际上，我想要两层上的所有事件。我不明白为什么在您的场景中可能会出现这种情况，我可以使用单击事件的x.y坐标想出一种解决方法-找出该位置（screenX、y或pageX.y）顶部div下是否有元素