Javascript 如何禁用在 div 内单击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28083708/
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
How to disable clicking inside div
提问by Reham Fahmy
For many reasons I need to disable clicking on certain content within a divelement. Due to clicking ads attacks, for example.
I still want it to be visible tho.
出于多种原因，我需要禁用单击div元素中的某些内容。例如，由于点击广告攻击。我仍然希望它是可见的。
Consider the following snippet :-
考虑以下片段：-
<div class="ads">
something should be here, i do not want to be clicked
</div>
how to disable the abilities of left-clicking whithin that div?
如何禁用左键单击的功能div？
回答by Aviad
The CSS property that can be used is:
可以使用的 CSS 属性是：
pointer-events:none
!IMPORTANTKeep in mind that this property is not supported by Opera Mini and IE 10 and below (inclusive). Another solution is needed for these browsers.
！重要请记住，Opera Mini 和 IE 10 及以下（含）不支持此属性。这些浏览器需要另一种解决方案。
jQuery METHODIf you want to disable it via script and not CSS property, these can help you out: If you're using jQuery versions 1.4.3+:
jQuery 方法如果你想通过脚本而不是 CSS 属性禁用它，这些可以帮助你：如果你使用 jQuery 1.4.3+ 版本：
$('selector').click(false);
If not:
如果不：
$('selector').click(function(){return false;});
- Referenced from : jquery - disable click
- 引用自： jquery - 禁用点击
You can re-enableclicks with pointer-events: auto;(Documentation)
您可以使用(文档)重新启用点击pointer-events: auto;
Note that pointer-eventsoverrides the cursorproperty, so if you want the cursor to be something other than the standard 
, your css should be place afterpointer-events.
需要注意的是pointer-events覆盖cursor属性，所以如果你想光标比标准以外的东西，你的CSS应该是地方后pointer-events。
回答by Abe Hendlish
If you want it in pure CSS:
如果你想在纯 CSS 中使用它：
pointer-events:none;
回答by Rakesh_Kumar
Try this:
尝试这个：
pointer-events:none
Adding above on the specified HTML element will prevents all click, state and cursor options.
在指定的 HTML 元素上添加上面的内容将阻止所有单击、状态和光标选项。
<div class="ads">
<button id='noclick' onclick='clicked()'>Try</button>
</div>
回答by LY MOT
If using function onclick DIV and then want to disable click it again you can use this :
如果使用函数 onclick DIV 然后想禁用再次单击它，您可以使用：
for (var i=0;i<document.getElementsByClassName('ads').length;i++){
document.getElementsByClassName('ads')[i].onclick = false;
}
Example :
HTML
示例：
HTML
<div id='mybutton'>Click Me</div>
Javascript
Javascript
document.getElementById('mybutton').onclick = function () {
alert('You clicked');
this.onclick = false;
}
回答by MOT EL
You can use css
你可以使用 css
.ads{pointer-events:none}
or Using javascript prevent event
或使用 javascript 阻止事件
$("selector").click(function(event){
event.preventDefault();
});
回答by Ashar Zafar
How to disable clicking another div click until first one popup div close
如何禁用单击另一个 div 单击直到第一个弹出 div 关闭
<p class="btn1">One</p>
<div id="box1" class="popup">
Test Popup Box One
<span class="close">X</span>
</div>
<!-- Two -->
<p class="btn2">Two</p>
<div id="box2" class="popup">
Test Popup Box Two
<span class="close">X</span>
</div>
<style>
.disabledbutton {
pointer-events: none;
}
.close {
cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
//One
$(".btn1").click(function(){
$("#box1").css('display','block');
$(".btn2,.btn3").addClass("disabledbutton");
});
$(".close").click(function(){
$("#box1").css('display','none');
$(".btn2,.btn3").removeClass("disabledbutton");
});
</script>
