Example code for disabling mouse click events using pure CSS

This article introduces how to disable mouse click events through pure CSS, which is more flexible than Javascript. You can refer to it if necessary.

JavaScript has a preventDefault method, which can be used to cancel the default action of an event. Such as unopening links, selecting text or dragging and dropping, etc.

Copy code

The code is as follows:

event.preventDefault()

This method will notify the web browser not to execute the default event associated with the event. action (if such an action exists). For example, if the type attribute is "submit", any event handler can be called at any stage of event propagation, and by calling this method, the form submission can be prevented. Note that if the Event object's cancelable property is fasle, then there is no default action, or the default action cannot be prevented. In either case, calling this method has no effect.

This method can prevent the browser's default behavior of the current element, but it does not prevent the event from being responded to by the parent and document. If you want to completely cancel the event, you can use stopPropagation

Copy code

The code is as follows:

event.stopPropagation()

This method will stop the propagation of the event, preventing it from being dispatched to other Document nodes. It can be called at any stage of event propagation. Note that although this method cannot prevent other event handlers on the same Document node from being called, it can prevent events from being dispatched to other nodes.

These two are commonly used methods to cancel events in JS, but there is actually another way to cancel event response using pure CSS, pointer-events, which is more convenient to use. Simple, it can:

1. Prevent the user’s click action from producing any effect

2. Prevent the display of the default mouse pointer

3. Prevent hover and hover in CSS Changes in the active state trigger events

4. Prevent events triggered by JavaScript click actions

For example, the following CSS will have the effect of graying out disabled buttons

Copy code

The code is as follows:

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

This method is obviously more flexible than js code, but unfortunately ie9 does not support it. The above is the entire content of this article. I hope it will be helpful to everyone’s study and work.

Related recommendations:

CSS text font color setting method (CSS color)

The above is the detailed content of Example code for disabling mouse click events using pure CSS. For more information, please follow other related articles on the PHP Chinese website!