jquery - 禁用 Div 中的鼠标和按键事件

Question

我Html在一个div. 有什么方法可以禁用该 Div 的鼠标和键事件（不适用于单个元素）？元素是自动生成的，并且在多个跨度内。因此，我只想禁用整个 div 以便什么都不能改变，但是readonly。

Answer 1

尝试使用.unbind() 之类的

$('#my_div_id').unbind();

它将删除将附加到该 div 的所有事件。请参阅此UNBIND

你可以使用 .die 也喜欢

$('#my_div_id').die();

Answer 2

根据 jQuery 文档， unbind 方法从元素中删除先前附加的事件处理程序。我的理解是，您只想防止触发默认浏览器事件，而不是删除以前附加的事件。

有一个简单的 CSS 解决方案，它不适用于 IE10 及以下版本：

#yourDiv {pointer-events:none;}

使用 jQuery 的解决方案是将事件添加到您的 div，然后防止默认行为发生在您选择的事件上：

$('#yourDiv').click(function(e){
    e.preventDefault();    
});

单击事件也应该适用于对复选框和单选按钮的键盘访问，但如果您需要，例如，防止在输入字段上输入文本，只需将键盘事件添加到列表中：

$('#yourDiv').click(function(e){
    e.preventDefault();    
});
$('#yourDiv').keypress(function(e){
    e.preventDefault();
});

我只是发布这个答案，因为它可能会帮助其他人寻找类似的功能，但我相信在你的情况下有更好的方法来做到这一点。您可以运行一个函数来$('#yourDiv input').prop("disabled", true);在加载后将您的元素设置为禁用。不知道你的html很难说。

Answer 3

您可以为此使用unbind jquery 函数。

$('#foo').unbind();

或者如果您想禁用特定事件，您可以使用它：

 $('#foo').unbind('click');

此外，您可以查看 jquery 的事件命名空间。我认为这可能对你有用。

Answer 4

这是另一个老把戏。

为避免与您的 div 上的鼠标发生任何接触，请在其顶部放置另一个相同大小的 div（使用 z-index），不透明度为 0（或等效于旧浏览器）。

您可以通过将显示属性从无（默认）更改为阻止来触发它。当 div 设置为阻止显示时，它将位于常规 div 的顶部，并在鼠标和 div 之间形成一堵墙。

它可能不适合您的特定页面和 css 架构，但如果适合，它很容易设置。:)

Answer 5

我相信您可以在执行的元素上绑定处理程序event.stopImmediatePropagation()

只要此事件首先触发，所有其他事件都不会触发。

不幸的是，无法手动定义事件优先级。您必须确保事件是在堆栈中最后定义的。

Answer 6

可以通过CSS解决。使用下面的代码

.div-element {
   pointer-events: none; // disable all the pointer events in div
}
.div-element * {
   pointer-events: auto; // enables all the pointer events in children elements of the div
}

Answer 7

我正在使用它来完全禁用所有窗口的点击。是具有高 z-Index 的透明覆盖面板，因此您无法单击任何位置。

var $ventanaModal = $('<div id="pantallaTransparente" class="ip-container containerFondoModal zIndexAlto"></div>');

$('body').prepend($ventanaModal); 

这是css类：

.pantallaTransparente {
background: transparent;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 99999999;
}

Answer 8

这按我的预期工作：

element.style {
   pointer-events: none;
}