jQuery 禁用 Div 中的鼠标和按键事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16688422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable mouse and key events in Div
提问by nebula
I have multiple Htmlelements inside a div. Is there any way to disable mouse and key events for that Div(Not for individual elements)? The elements are auto generated and are inside multiple spans. Hence i just want to disable the whole div so that nothing can be changed but readonly.
我Html在一个div. 有什么方法可以禁用该 Div 的鼠标和键事件（不适用于单个元素）？元素是自动生成的并且位于多个跨度内。因此，我只想禁用整个 div，这样除了readonly.
回答by Gautam3164
回答by Hugo Silva
As per jQuery docs, unbind method removes a previously-attached event handler from the elements. My understanding is that you just want to prevent the default browser events from being triggered, instead of removing previously attached events.
根据 jQuery 文档，unbind 方法从元素中删除先前附加的事件处理程序。我的理解是您只想防止触发默认浏览器事件，而不是删除以前附加的事件。
There is a simple CSS solution for it, which doesn't work on IE10 and below:
有一个简单的 CSS 解决方案，它不适用于 IE10 及以下：
#yourDiv {pointer-events:none;}
A solution using jQuery would be adding an event to your div, and then preventing default behavior from happening on events of your choice:
使用 jQuery 的解决方案是向您的 div 添加一个事件，然后防止在您选择的事件上发生默认行为：
$('#yourDiv').click(function(e){
e.preventDefault();
});
Click events should also work for keyboard access to check boxes and radio buttons, but in case you need, for example, prevent text typing on an input field, just add keyboard events to the list:
单击事件也应该适用于对复选框和单选按钮的键盘访问，但如果您需要，例如，防止在输入字段上输入文本，只需将键盘事件添加到列表中：
$('#yourDiv').click(function(e){
e.preventDefault();
});
$('#yourDiv').keypress(function(e){
e.preventDefault();
});
I am just posting this answer because it might help other people looking for similar functionality, but I believe there are better ways of doing this on your case. You could run a function to set your elements to disabled $('#yourDiv input').prop("disabled", true);after loading. Hard to tell without knowing your html.
我只是发布这个答案，因为它可能会帮助其他人寻找类似的功能，但我相信有更好的方法来解决你的问题。您可以运行一个函数来$('#yourDiv input').prop("disabled", true);在加载后将元素设置为禁用。不知道你的 html 很难说。
回答by Tom Sarduy
You could use the unbindjquery function for that.
您可以为此使用unbindjquery 函数。
$('#foo').unbind();
or if you want to disable specific events you can use it like:
或者，如果您想禁用特定事件，您可以像这样使用它：
$('#foo').unbind('click');
Also, you could take a look at jquery's event namespacing. I think that is probably going to be useful to you.
此外，您可以查看 jquery 的事件命名空间。我认为这可能对你有用。
回答by sujithuix
Can be solved by CSS. Use the below code
可以通过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
}
回答by Maxim Kumpan
I believe you can bind a handler on the element that executes event.stopImmediatePropagation()
我相信你可以在执行的元素上绑定一个处理程序 event.stopImmediatePropagation()
As long as this event fires first, all others will not fire.
只要此事件首先触发，其他所有事件都不会触发。
Unfortunately, it is not possibleto manually define event priority. You have to make sure that the event is defined last in the stack.
不幸的是，无法手动定义事件优先级。您必须确保事件在堆栈中最后定义。
回答by Antoine Mouquod
Here is another old trick.
这是另一个老技巧。
To avoid any contact with the mouse on your div, place another div of the same size on top (with z-index) of it with an opacity of 0 (or equivalent for older browser).
为避免与 div 上的鼠标发生任何接触，请在其顶部（带有 z-index）放置另一个相同大小的 div，不透明度为 0（或等效于旧版浏览器）。
You trigger it by changing the display property from none (default) to block. When the div has a display set to block it will be on top of your regular div and make a wall between the mouse and your div.
您可以通过将显示属性从无（默认）更改为阻止来触发它。当 div 的显示设置为阻止时，它将位于常规 div 的顶部，并在鼠标和 div 之间建立一堵墙。
It might not fit with your specific page and css architecture but if it does, it's easy to setup. :)
它可能不适合您的特定页面和 css 架构，但如果适合，则很容易设置。:)
回答by Mikel
I′m using this for completely disable click for all the window. Is a transparent overlay panel with a high z-Index, with this you can′t click anywhere.
我正在使用它来完全禁用所有窗口的点击。是一个具有高 z-Index 的透明叠加面板，因此您无法点击任何地方。
var $ventanaModal = $('<div id="pantallaTransparente" class="ip-container containerFondoModal zIndexAlto"></div>');
$('body').prepend($ventanaModal);
And here is the css class:
这是 css 类：
.pantallaTransparente {
background: transparent;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 99999999;
}
回答by nicpas
This worked as I expected:
这按我的预期工作：
element.style {
pointer-events: none;
}
