Css disable click event

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 using CSS?

In HTML, most of the elements are not inherently clickable. Which means that they do not have a default click event attached that is triggered when the user clicks on them.

But, sometimes, we want to prevent the default clicking on elements. For example, if the user has not filled all mandatory fields in the form, we want to keep the submit button disabled i.e. the user shouldn’t be allowed to click on the submit button.

Similar situations can also occur for hyperlinks and inputs where you need to disable the click event.

In this article, We will learn how we can disable click events on various elements with CSS. We will also discuss the pros and cons of using CSS to disable clicking on elements.

Disable Click Event using pointer-events Property

The pointer-events property specifies whether or not an element should allow various pointer events such as mouse hover, mouse click, double click, mouse enter, mouse leave, and so on.

So, if you want to disable click events on any HTML element, you can simply set its pointer-events property to none .

When you set the pointer-events property to none , it disables all kinds of mouse events such as hover, click, double click, etc. on that element. So, the element becomes completely disabled.

Let’s say we have two buttons in our HTML file. We want to disable all click events on the first button, whereas, we want to keep the second button as it is.

To disable all click events on the first button, set its pointer-events property to none . This will make it completely disabled.

/*Disable the button */ .disabled

Below is the outcome of the above code:

As you can see from the above demo image, the first button is not responding to the click event because we have set its pointer-events to none . Whereas, the second button is working normally.

Now, one question arises, will the pointer-events: none; also disable the click event on those HTML elements which do not have a default click behavior, such as a div, paragraph, list?

Well, the answer is yes. The pointer-events: none; works on all elements irrespective of their default click behavior.

Let me show you this with an example.

Let’s say we have two div elements and we have explicitly added a function changeColor() to their onclick attribute, which changes the div’s background color on the click event:

 
Click on me to change color(No pointer-events)
 
This div has pointer-event: none;
 

Inside our JavaScript file, we have defined the changeColor() function, which triggers on the click event and set the clicked div’s background color to yellow:

// Change divs’ background color to yellow function changeColor(target)

Now, we only want to change the background color of the first div element whenever someone clicks on it, whereas, we don’t want the second div to respond to the click event.

To do that, we can simply set its pointer-events property to none . This will prevent all kinds of pointer events.

/*Make the element disabled to pointer events*/ .disabled < pointer-events: none; >div

Below is the outcome of the above code:

Will pointer-events:none; Also Disable Hover Effect?

In the last few examples, we saw how we can disable the click event with pointer-events: none; . But, did you notice that it would also disable other events such as hover, mouseenter, mouseleave, etc. along with the click event?

Well, that is the main problem that we face while disabling the click events with the pointer-events property.

Let me show you this with an example.

Let’s say we have two div elements and we want to disable only the click event on the second div element but we want to keep the hover effects on both divs.

 
This div's pointer events are not disabled.
 
 

Let’s now try to disable the click event on the second div:

Here is the outcome of the above CSS code:

As you can see from the above gif, we only wanted to disable the click event on the second div, but it has also disabled the hover event unknowingly.

So, wherever, you are using the pointer-events: none; , you have to keep in mind that it will disable all kinds of pointer events.

Conclusion

In this article, we learned how we can disable click events using CSS.

To disable click events in CSS, we can use the pointer-events property. If you set the pointer-events property to none , it will disable all kinds of pointer events on that element such as click, hover, mouseenter, mouseleave, dbclick, etc.

Related posts:

Источник