javascript - How to disable clicking inside div - Stack Overflow

admin管理员组

文章数量:1135111

For many reasons I need to disable clicking on certain content within a div element. Due to clicking ads attacks, for example. I still want it to be visible tho.

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?

For many reasons I need to disable clicking on certain content within a div element. Due to clicking ads attacks, for example. I still want it to be visible tho.

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?

• javascript
• jquery

Share Improve this question Follow edited Jan 22, 2015 at 8:09 Aviad 3,58433 gold badges1717 silver badges2323 bronze badges asked Jan 22, 2015 at 7:55 Reham FahmyReham Fahmy 1,12822 gold badges77 silver badges1010 bronze badges 2

• FWIW, ads are typically written into iframes to prevent the host page from having access – Rob M. Commented Jan 22, 2015 at 7:57
• check this out stackoverflow.com/questions/5259191/… – rasso Commented Jan 22, 2015 at 7:57

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 211

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

• Referenced from : jquery - disable click

---

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 , your css should be place after pointer-events.

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>

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

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

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

本文标签： javascriptHow to disable clicking inside divStack Overflow