How to disable clicking inside div

Question

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?

FWIW, ads are typically written into iframes to prevent the host page from having access — Rob M., Jan 22 '15 at 07:57
check this out http://stackoverflow.com/questions/5259191/disable-clicking-of-a-divs-element — rasso, Jan 22 '15 at 07:57

score 199 · Accepted Answer · edited Aug 28 '19 at 14:24

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

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.

edited Aug 28 '19 at 14:24

ashleedawg

20,365
9
72
105

answered Jan 22 '15 at 08:11

Aviad

3,424
3
14
21

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 07 '19 at 11:32
Now it's supported by mobile Opera: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events – macabeus Jan 17 '20 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. – Lê Quang Bảo Dec 03 '20 at 04:14

score 51 · Answer 2 · answered Jan 22 '15 at 08:00

51

If you want it in pure CSS:

pointer-events:none;

answered Jan 22 '15 at 08:00

Abe Hendlish

707
5
11

what! this is totally awesome .. tested and works perfect, never know about that css property before .. thanks a lot – Reham Fahmy Jan 22 '15 at 08:04
3

Please see my answer below as this is not a robust solution. – Aviad Jan 22 '15 at 08: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 '19 at 09:53
simple and precise way to do the stuff. Thank you very much :) – Imran Rafiq Rather Apr 12 '20 at 09:39
Works nicely, but seriously, what does this have to do with _styling_?! This shouldn't be a CSS property. – balanceglove2 Aug 12 '22 at 15:30

score 7 · Answer 3 · answered Jan 22 '15 at 08:02

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>

answered Jan 22 '15 at 08:02

Rakesh_Kumar

1,442
1
14
30

score 4 · Answer 4 · answered Aug 08 '19 at 09:36

4

You can use css

.ads{pointer-events:none}

or Using javascript prevent event

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

answered Aug 08 '19 at 09:36

MOT EL

182
10

score 3 · Answer 5 · answered Sep 20 '18 at 08:42

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

score 1 · Answer 6 · edited Jul 25 '19 at 07:42

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>

How to disable clicking inside div

6 Answers6

Linked