JavaScript has a Preventdefault method that cancels the default action for an event since it is available. For example, cancel open the link, select text or drag and drop.
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 property is "Submit," any event handle can be invoked at any stage of the event propagation, and by invoking the method, the form can be blocked. 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 can block 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
Event.stoppropagation ()
This method stops the propagation of the event and prevents it from being dispatched to another Document node. It can be invoked at any stage of the event propagation. Note that although this method cannot prevent other event handles from being invoked on the same Document node, it can prevent the dispatch of events to other nodes.
These two are commonly used in JS cancellation of the event method, but in fact there is a pure CSS can be implemented to cancel the event response method, pointer-events, easy to use, it can:
1 prevents the user from clicking the action to produce any effect
2 block the display of the default mouse pointer
3 Block CSS Hover and active state changes trigger events
4 Blocking events triggered by JavaScript click action
For example, the following CSS will be the effect of turning off the button that is disabled
. Disabled {
Pointer-events:none;
Cursor:default;
opacity:0.6;
}
This method is obviously more flexible than JS code, but IE9 does not support