How to disable a click inside a specific div or a section

There may be a case when you want to disable a click inside a specific div element. In this article, we will see how to disable clicking inside a specific DIV or a SECTION using CSS and JavaScript.

This article actually covers multiple approaches for CSS, JavaScript, and jQuery to achieve the feature.

Disable click using the CSS method

To disable clicking inside a div with CSS or JavaScript, we need to set the pointer-events CSS property to none.

The CSS property is:

pointer-events: none;

Note: You can use !important to override with any default pointer events.

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.

Please visit Can I Use to see the browser’s support.

Disable click using JavaScript

You can also disable a click inside a specific DIV or Section using the preventDefault:

event.preventDefault();

Or

document.getElementById('id').style.pointerEvents = 'none';

The jQuery method

If you want to disable it via jQuery and not from the CSS property, please use the following code:

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

It is tested with jQuery versions 1.4.3+

Another jQuery method to disable click event is below:

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

Or

$("#div").unbind("click");