Làm sao Disable Clicking Inside a Div with CSS or JavaScript

23rd May 2022
Table of contents

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

Also, we can add a click event listener to the div and then call event.preventDefault inside.

For instance, if we have the following div:

<div id='foo'>  
  foo  
</div>

Then we can disable clicks inside it with CSS by writing:

#foo {  
  pointer-events: none;  
}

To disable clicks with JavaScript, we can write:

const foo = document.querySelector('#foo')  
foo.addEventListener('click', (event) => {  
  event.preventDefault();  
});

to select the div by its ID with document.querySelector .

Then we call addEventListener on it with 'click' and a click event handler that calls event.preventDefault to stop the default action when the div is clicked.

Conclusion

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

Also, we can add a click event listener to the div and then call event.preventDefault inside.

Bạn thấy bài viết này như thế nào?
0 reactions

Add new comment

Image CAPTCHA
Enter the characters shown in the image.
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”

Related Articles

SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor). Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch

I’ve saved the best for last with this Zelda character design. She’s a bit short in the legs but overall the style is accurate.

Built around the Pokemon Go phenomenon is this pure CSS Eevee made by David Khourshid.

There’s a lot of great Sass logic in the CSS, and if you’re a dev nerd, you’ll enjoy poking around this pen. Both the code and the result are glorious.