CSS prohibit mouse Click event Example

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.