Block mouse Click event Sample code with a pure CSS implementation

This article describes the implementation of the pure CSS to prevent mouse click events, more flexible than JavaScript, there is a need to refer to learning.

JavaScript has a preventdefault method that cancels the default action of an event since it is available. For example, cancel the open link, select text or drag and drop, etc.

Copy Code

The code is as follows:

Event.preventdefault ()

This method notifies 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 handle can be called at any stage of event propagation, and by calling the method, you can prevent the form from being submitted. Note that if the Cancelable property of the Event object is Fasle, there is no default action, or the default action cannot be blocked. In either case, calling the method has no effect.

This method blocks the browser default behavior of the current element, but 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 the stoppropagation

Copy Code

The code is as follows:

Event.stoppropagation ()

This method stops the propagation of the event and prevents 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 handles on the same Document node from being called, it can prevent events from being dispatched to other nodes.

These two are commonly used in JS cancellation of the method, but there is a pure CSS can be implemented to cancel the event response method,pointer-events, easy to use, it can:

1, prevent the user's click action to produce any effect

2, prevent the default mouse pointer display

3. Block hover and active state changes in CSS to trigger events

4. Prevent JavaScript Click action triggered events

For example, the following CSS will go up to the effect of turning off the button

Copy Code

The code is as follows:

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

This method is obviously more flexible than the JS code, but IE9 does not support it. The above is the whole content of this article, I hope that everyone's study and work can be helpful.