如何禁用点击内部 div

由于许多原因，我需要禁止点击 div元素中的某些内容。例如，由于点击广告的攻击。 我仍然希望它是可见的。

考虑以下片段:-

<div class="ads">
something should be here, i do not want to be clicked
</div>

如何禁用的能力，左键点击内的 div？

202506 次浏览
小开

If you want it in pure CSS:

pointer-events:none;
小开

Try this:

pointer-events:none

Adding above on the specified HTML element will prevents all click, state and cursor options.

http://jsfiddle.net/4hrpsrnp/

<div class="ads">
<button id='noclick' onclick='clicked()'>Try</button>
</div>
小开
最佳答案

The CSS property that can be used is:

pointer-events:none

!IMPORTANT Keep in mind that this property is not supported by Opera Mini and IE 10 and below (inclusive). Another solution is needed for these browsers.

jQuery METHOD If 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+:

$('selector').click(false);

If not:

$('selector').click(function(){return false;});

You can re-enable clicks with pointer-events: auto; (Documentation)

Note that pointer-events overrides the cursor property, so if you want the cursor to be something other than the standard cursor, your css should be place after pointer-events.

小开

How to disable clicking another div click until first one popup div close

Image of the example

 <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>
小开

If using function onclick DIV and then want to disable click it again you can use this :

for (var i=0;i<document.getElementsByClassName('ads').length;i++){
document.getElementsByClassName('ads')[i].onclick = false;
}

Example :
HTML

<div id='mybutton'>Click Me</div>

Javascript

document.getElementById('mybutton').onclick = function () {
alert('You clicked');
this.onclick = false;
}
小开

You can use css

.ads{pointer-events:none}

or Using javascript prevent event

$("selector").click(function(event){
event.preventDefault();
});

提交答案