javascript - 如何在 Chrome 中显示 div，但使其完全不交互

Question

我的页面上有一个<div>覆盖，它可以跟踪鼠标。但是，有时用户能够以适当的速度移动鼠标进入跟踪<div>。此外，这<div>有时会阻止用户点击下方/后面的其他内容。

什么是直观地显示 this 的正确方法<div>，而不会“阻塞”或干扰底层 DOM 或其中任何一个？特别是要阻止它干扰鼠标事件。

Answer 1

对此已经有了很好的答案，您也可以考虑使用 css：

pointer-events: none;

这有效地使事件作用于 div 下面的项目，而不是 div 本身。

在 IE 上对此的支持不是很好，但如果您不需要 IE 支持，或者如果您有时间正确地做它并包含有条件的回退，这是一个很好的方法。

查看支持信息：http ://caniuse.com/pointer-events

Answer 2

您可以在其上方（具有更高的 z-index）放置一个绝对定位的div元素，其opacity值为 0

或者

你可以使用 jQuery：

$(function(){
    $('#divId').click(function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();
    });
});

我个人更喜欢这种opacity方法。但这就是我。

希望有帮助

Answer 3

Yuo 可以尝试使用以下方法捕获事件并阻止其默认行为

event.preventDefault();

这是一个伪代码，它可以在没有 jquery 的情况下工作

var el = document.getElementById("yourdiv");
el.addEventListener("click", action, false);

function action() {
    event.preventDefault();
return false;
}