99

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?

2

6 Answers 6

199

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.

3
  • 2
    Oh you are my life saver! I did spend a lot of time try to find out how to prevent user from clicking on an item. Later on, "cursor event" phrase appeared in my head and I got your answer. Cool, isn't it?
    – Travis Le
    Oct 7, 2019 at 11:32
  • Now it's supported by mobile Opera: developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
    – macabeus
    Jan 17, 2020 at 17:11
  • 1
    I have a component that floating on another component, they aren't parent-child related, and I don't want the user to click on the above one. Your CSS method works like a charm. Dec 3, 2020 at 4:14
51

If you want it in pure CSS:

pointer-events:none;
5
  • what! this is totally awesome .. tested and works perfect, never know about that css property before .. thanks a lot Jan 22, 2015 at 8:04
  • 3
    Please see my answer below as this is not a robust solution.
    – Aviad
    Jan 22, 2015 at 8:12
  • 1
    For me this is not a good solution. This disables not only click event, but also scroll and others ...
    – Kamil Naja
    Apr 27, 2019 at 9:53
  • simple and precise way to do the stuff. Thank you very much :) Apr 12, 2020 at 9:39
  • Works nicely, but seriously, what does this have to do with styling?! This shouldn't be a CSS property. Aug 12, 2022 at 15:30
7

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

You can use css

.ads{pointer-events:none}

or Using javascript prevent event

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

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.