禁用Div中的鼠标和键盘事件

Question

我在一个

标签内有多个Html元素。有没有办法禁用该

标签的鼠标和键盘事件（而不是单个元素）？这些元素是自动生成的，位于多个标签内。因此，我只想禁用整个

标签，以便不能更改任何内容，但仍然可以保持readonly状态。

- nebula

---

@DhavalMarthak 如我上面所提到的，这些元素是自动生成的。我只能获取 div 的 ID，没有其他信息。 - nebula

但是你不能展示一下你正在生成的元素的原型吗？ - Dhaval Marthak

jQuery的unbind函数怎么样？ - Tomas Ramirez Sarduy

Answer 1

尝试使用 .unbind()，例如：

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

它将删除绑定在该div上的所有事件。参见UNBIND

您也可以使用 .die 方法，例如：

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

- GautamD31

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很难确定最佳方案。

- Hugo Silva

---

#yourDiv {pointer-events:none;} 在IE11及以下版本中无法正常工作。 - Jack Fairfield

很好的发现 @JackFairfield。我已经根据这个表格更新了答案 - http://caniuse.com/#feat=pointer-events - Hugo Silva

这不会禁用键盘事件。如果您想禁用键盘事件，那是因为您已经附加了监听器。如果您在已经附加的监听器之后应用此监听器，则其他监听器仍将运行，因此在禁用事件方面没有任何影响。取消事件的默认操作与禁用事件并不相同。它们根本不一样。如果您首先附加此监听器或使用比所有其他事件更高的优先级附加它，则可以调用stopImmediatePropagation，但preventDefault对于此问题无用。 - Triynko

使用.on("click keypress")可以阻止鼠标和键盘事件，而且更简洁。 - user5147563

Answer 3

我正在使用这个功能来完全禁用所有窗口的点击。 这是一个具有高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;
}

- Mikel

Answer 4

你可以使用jQuery的解绑函数unbind来实现。

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

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

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

此外，您可以看一下jQuery的事件命名空间。 我认为这对您可能非常有用。

- Tomas Ramirez Sarduy

Answer 5

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

- sujithuix

---

它不会禁用关键事件。 - Dzenly

键盘事件怎么样？ - Amit Singh

Answer 6

这是另一个老技巧。

为了避免鼠标接触到您的div，请在其上方（使用z-index）放置一个相同大小的另一个div，并将其不透明度设置为0（或旧浏览器的等效方法）。

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

它可能不适用于您特定的页面和CSS架构，但如果适用，则易于设置。 :)

- Antoine Mouquod

---

这不会阻止键盘交互。 - FirstVertex

Answer 7

我相信你可以在元素上绑定一个处理程序，执行event.stopImmediatePropagation()

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

不幸的是，手动定义事件优先级是不可能的。你必须确保该事件在堆栈中最后定义。

- Maxim Kumpan

---

ActionScript 3 中存在事件优先级，这使得 JavaScript 相形见绌，并且已经存在了十年之久。AS3 的 InteractiveObject.mouseEnabled 属性的作用类似于 pointer-events:none，但实际上禁用了鼠标和键盘的所有交互事件。在 2017 年无法禁用键盘事件或设置事件优先级是 JavaScript 的巨大失败。无论如何，stopImmediatePropagation 是唯一正确的答案，可以真正防止键盘事件触发。http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/EventDispatcher.html#addEventListener() - Triynko

Answer 8

这个按照我的预期工作了：

element.style {
   pointer-events: none;
}

- nicpas

---

这不会禁用键盘事件。 - Reid

Answer 9

这里是我的解决方案，它可以自动地通过 jQuery 捕捉所有标记为只读的输入元素的点击和按键事件——非常简单易行的修复方法，使它们真正只读。

无需再进行更多思考，只需将需要的输入元素标记为 readonly，即可完成。

 // prevent click and keypress events for readonly marked inputs
$(":input[readonly='readonly']").on("click keypress", function (event) {
    event.preventDefault();
});

使用Bootstrap时，可能会在单击和按键事件期间看到一些闪烁。 ;)

- SiL3NC3