How to disable click inside div

Question

For many reasons, I need to disable clicking on certain content in the div element. For example, due to clicking on advertising attacks. I still want it to be visible.

Consider the following snippet: -

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

how to disable left click options on what div ?

Answer 1

CSS property that can be used:

 pointer-events:none 

! IMPORTANT Please note that this property is not supported by Opera Mini and IE 10 and below (inclusive). For these browsers, a different solution is needed.

JQuery METHOD If you want to disable it using a script rather than CSS properties, they can help you: If you are using jQuery version 1.4. 3+:

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

If not:

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

• Link 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 different from the standard , your CSS should be in place after pointer-events .

Answer 2

If you want it in pure CSS:

 pointer-events:none; 

Answer 3

Try the following:

 pointer-events:none 

Adding the above HTML element above will prevent all click, state, and cursor options.

http://jsfiddle.net/4hrpsrnp/

 <div class="ads"> <button id='noclick' onclick='clicked()'>Try</button> </div> 

Answer 4

How to disable click on another div element until the first pop-up div element closes

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

Answer 5

If you use the onclick DIV function and then want to disable it, click 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; } 

Answer 6

You can use CSS

 .ads{pointer-events:none} 

or Using a JavaScript Prevention Event

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