How to set div to be non-clickable with css

Css method to set div to be non-clickable: 1. Cancel the default action of the event through the "event.preventDefault()" method; 2. Stop the propagation of the event through the "event.stopPropagation()" method.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

Recommended: css video tutorial

How to set div to be non-clickable in css?

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 does not prevent other event handlers on the same Document node from being called, it does 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 simpler to use. It can:

• Prevent the user's click action from having any effect

• Prevent the display of the default mouse pointer

• Prevent hover and active state changes in CSS from triggering events

• Prevent events from being triggered by JavaScript click actions

css To set the div to be non-clickable, you can use the following code:

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

This method is obviously more flexible than js code, but unfortunately ie9 does not support it.

The above is the detailed content of How to set div to be non-clickable with css. For more information, please follow other related articles on the PHP Chinese website!