About the CSS code to prevent mouse click events

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.

event.preventDefault()

This method will inform the web browser not to perform the default action associated with the event (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

event.stopPropagation()

This method will stop the propagation of the event and prevent 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 Active state changes trigger events

4. Prevent JavaScript click actions from triggering events

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

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

This 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. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Using CSS3 to rotate the border when the mouse is hovering

Using CSS3 to achieve eight groups of super Cool mouse over picture animation

CSS3 implements mouse hover to display expanded content

The above is the detailed content of About the CSS code to prevent mouse click events. For more information, please follow other related articles on the PHP Chinese website!