Detailed css3 pointer-events (stop hover, active, onclick event to trigger, etc.

pointer-events More like JavaScript, it can:

• Prevent the user clicks any effect

• Prevent default mouse pointer display

• Stop in the CSS  hover and the  active change of state triggering event

• Click action to prevent JavaScript events triggered

The actual code usage case:

After 1, submit the page, click on the submit button to add the style attribute (style = "pointer-events"), to prevent duplicate submission. @camnpr

2, absolute positioning some of the layers covering the button, you can click on it to penetrate. and many more.

Look at the specific usage:

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events property have a lot of value, but for the browser, only auto and non two values ​​are available, a few others are for SVG's (the property itself comes from SVG technology).

@ Zhengzhou network construction

Detailed attribute value pointer-events

• auto-- effect and does not define the same attribute pointer-events, the mouse does not penetrate the current layer. In SVG, the same effect and the value of visiblePainted.

• none-- element is no longer a target for mouse events, mouse no longer monitor the current layer away listens elements of the layers below. But if it's a child element pointer-events set to other values, such as auto, mouse will still monitor the child elements.

• Other SVG specific attribute value, no more described here.

Browser Compatibility

Chrome 2.0+ and Firefox 3.6+ and safari 4.0+ support this CSS3 property, IE6 / 7/8/9 is not supported (IE11 also supported, but the good thing is to add a click event in ie disabled automatically invalid. ), Opera in SVG support. But it does not support this attribute in HTML.