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

可以通过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 5

我相信你可以在执行event.stopImmediatePropagation()

的元素上绑定一个处理程序

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

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

Answer 6

这是另一个老把戏。

要避免在div上与鼠标有任何接触，请将另一个相同大小的div放在其上面（使用z-index），不透明度为0（或equivalent for older browser）。

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

它可能不适合您的特定页面和css架构，但如果确实如此，则设置起来很容易。：）

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;
}

在Div中禁用鼠标和键事件

8 个答案: