Css disable click on div

CSS pointer-events – disable click on an element

CSS property pointer-events can be used enable/disable (default is enabled) mouse events on an element. If pointer-events is none for an element, the click event will be passed through it to next eligible element below it.

CSS property pointer-events

CSS version:	CSS 4
Value:	auto | none | inherit
Initial:	auto
Applies to:	all elements
Inherited:	yes

Note that pointer-events also have many other values (visiblePainted, visibleFill) which are relevant for SVG. We’ll not cover those in this tutorial.

Example – pointer-events none

 .disablemouse < pointer-events: none; >div Click Disabled 
 
Normal button

Specification and Browser compatibility

Specification	Status	Categories
CSS pointer-events (for HTML)	CSS3

Desktop

Chrome	Firefox	IE	Edge	Safari	Opera
Yes 4+	Yes 3.6+	Yes 11+	Yes 12+	Yes 4+	Yes 15+

Mobile

Android Chrome	Android Firefox	iOS Safari	IE Mobile	Opera Mobile
Yes 47+	Yes 44+	Yes 3.2+	Yes 11+	Yes 33+

Suggested posts:

Источник

How to Disable Click Event Using CSS

Buttons are usually used to perform a specific action. For instance, when you click on the added button, it will trigger a certain event. CSS allows us to disable the click event. So, if you want to disable the click event, add a pointer event in CSS and set its value according to the requirements.

In this article, we will learn how to disable the click event using CSS.

How to Disable Click Event Using CSS?

You can disable click events using the CSS “pointer-events” property. But, jumping into it, we will briefly explain it to you.

What is “pointer-events” CSS Property?

The “pointer-events” control how the HTML elements respond or behave to the touch event, such as click or tap events, active or hover states, and whether the cursor is visible or not.

Syntax
The syntax of pointer-events is as follows:

The above mention property takes two values, such as “auto” and “none”:

• auto: It is used to perform default events.
• none: It is utilized to disable events.

Note: The below-given example will firstly demonstrate how to add two active buttons, and then we will disable the click event of the second button.

Example 1: Disabling Click Event of Buttons Using CSS
In this example, we will create a heading and two buttons. Next, specify the “button” as the class name of the first button, and assign “button” and “button2” as the classes of the second button.

In CSS, “.button” is used to access both buttons created in the HTML file. Next, set the border style as “none” and give padding as “25px”. After that, set the color of the button text as “rgb(29, 6, 31)” and the button background as “rgb(19, 192, 163)”. We will also set the radius of a button as “5px”.

.button {
border : none ;
padding : 25px ;
color : rgb ( 29 , 6 , 31 ) ;
background-color : rgb ( 19 , 192 , 163 ) ;
border-radius : 5px ;
}

After that, we will apply the :active pseudo-class on both buttons as “.button:active” and set the color of the button as “rgb(200, 255, 0)”:

As a result, you will see the following outcome:

Now, we will move to the next part in which we will disable the click event for the second button.

To do so, use “.button2” to access the second button, created in the HTML file, and after that, set the value of the pointer-events property as “none”:

Using the pointer-events property and setting its value to non will disable the click event, which can be seen in the following output:

We have provided the easiest method for disabling the click event using CSS.

Conclusion

To disable the click event in HTML, the “pointer-events” property of CSS is used. For this purpose, add an HTML element and set the value of the pointer-events property as “none” to disable its click event. This article explained how to disable the click event using CSS along with its example.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

How to disable click event on div using css

If you do this, you can then add listeners as you wish to any buttons (or even to the document) using jQuery — and any clicked buttons that happen to have a class (or an ancestor element with a class) will not have their click handlers fire, regardless of whether the listener is attached to the button or a parent element. Let’s say I have a lot of different buttons and if any of these buttons contain the class I want it to disable all the click events attached to this element.

How to disable click event on div using css

// To disable: document.getElementById('id').style.pointerEvents = 'none'; // To re-enable: document.getElementById('id').style.pointerEvents = 'auto'; // Use '' if you want to allow CSS rules to set the value

How to disable all div content, If you have a div, and you want to support click or a key event on that div, then you have to do two things: 1) When you want to disable the div, set its

How to disable a div after only one click in javascript without disabling click event on elements within it?

I’m trying to create a button on a click inside elemId div. But want the button to be appended only once and then disable the click event on the div alone but not on the button element.

 document.getElementById('elemId').addEventListener('click', function(e)< var button = document.createElement("button"); var buttonText = document.createTextNode("click me"); button.appendChild(buttonText); document.getElementById('elemId').appendChild(button) document.getElementById('elemId').removeEventListener('click', function(e)< // removeEventListener doesn't work >) document.getElementById('elemId').disabled = true // disabled doesn't work >) 

You can name your function anything you want I named it ‘x’ in this example and then reference that when you want to remove the click event listener.

document.getElementById('elemId').addEventListener('click', function x(e) < var button = document.createElement("button"); var buttonText = document.createTextNode("click me"); button.appendChild(buttonText); document.getElementById('elemId').appendChild(button) document.getElementById("elemId").removeEventListener("click", x); >)

Create the function/handler and after the element creation process remove that handler using the function removeEventListener .

This approach creates a function to accomplish your requirements, further, you will be able to recover that handler to bind it again.

document.getElementById('elemId').addEventListener('click', handler);function handler(e)

You want to make sure you have a function handler. The way you’re doing it doesn’t work because you’re not removing the proper event listener. You’re using an anonymous function, but you need to point to the actual function handler used for the event to be removed.

Also, I’m not sure what you are trying to do with disabling your div. I removed that line, because you can’t disable a div.

I also refactored a bit to make the code a bit cleaner and easier to read.

document.getElementById('elemId').addEventListener('click', addButton, false);function addButton()

Disable click and darken background when menu is open (div), const BtMenu = document.querySelector(‘a.closebtn’) , myMenu = document.querySelector(‘#myMenu’) , menuOpen = () => myMenu.classList.contains(‘

Disabling click events for all elements that contain a certain class

It seems a very straight forward problem but I cannot find a proper way of solving this. How would I be able to have one master class that disables all the click events for this element.

Let’s say I have a lot of different buttons and if any of these buttons contain the class btn-disabled I want it to disable all the click events attached to this element.

$(document).on('click', '.btn-disabled', function() < return false; >); $(document).on('click', '.button:not(.btn-special)', function() < alert('You have clicked the button!'); >); $(document).on('click', '.button.btn-special', function() < alert('You have clicked the special button!'); >); 
 
Enabled Special Button
 
Disabled Button
 
Disabled Special Button
 

I expected for the disabled buttons to not have any alerts popping up but instead they currently just work like the non-disabled buttons. What am I missing?

One of the big problems is that jQuery only attaches and listens to bubbling events. If you attach a listener to the document, it will only ever run after all intermediate listeners (between the clicked element and the document) have fired.

I’d use vanilla JS instead, so that you can attach a listener in the capturing phase, before the event captures down to the target. Then stopPropagation will prevent the event from reaching the target in the first place.

document.addEventListener( 'click', (e) => < if (e.target.closest('.btn-disabled')) < e.stopPropagation(); >>, true // attach in capturing phase ); 

If you do this, you can then add listeners as you wish to any buttons (or even to the document) using jQuery — and any clicked buttons that happen to have a btn-disabled class (or an ancestor element with a btn-disabled class) will not have their click handlers fire, regardless of whether the listener is attached to the button or a parent element.

How to disable and then enable onclick event on with javascript, Then you cannot disable a div because it normally has no functionality. To disable a click event, you simply have to remove the event from the

Источник