CSS3 pointer-events Introduction

Actually knew this attribute early, but has not been studied. Today, just to see the word on Twitter, to study the next, just to solve the current encounter a small problem, so share. Well, it's a relatively simple CSS3 attribute.

In a project, many elements need to be positioned above a map layer, where there are a lot of absolute or relative positioning elements, but in this case, these floating div or other elements will generally give a width high, or relative elements can not be wide, this time, These elements will cover the map layer below so that the map layer cannot operate ...

And then just in the Google map to see a similar problem, take as an example:

The upper-left corner of the Google map occupies a large area of operation, such as the red box area, and then the map layer cannot be manipulated in this area. Then we can set pointer-events:none for this Div, and then you'll find that the following map can be dragged and clicked.

But the tragedy is, the operation area itself is unable to operate, is directly ignored. But don't worry, we can reset the elements inside to Pointer-events:auto, and of course, just the locale for the element that needs to be manipulated.

It seems a bit tangled, but it's guaranteed to maximize the operational area of the map itself.

Well, the above is just a simple example to look at the specific usage:

Pointer-events:
				auto
				none  visiblepainted  visiblefill  visiblestroke  visible  painted  Fill  Stroke  all  inherit

The pointer-events attribute has many values, but for browsers, only auto and non two values are available, while others are for SVG (the attribute itself is derived from SVG technology).

Pointer-events attribute value detailed

• The auto--effect is identical to the undefined pointer-events property, and the mouse does not penetrate the current layer. In SVG, this value has the same effect as visiblepainted.
• The none--element is no longer the target of the mouse event, and the mouse no longer listens to the current layer and listens to the elements in the layer below. But if its child elements set pointer-events to other values, such as auto, the mouse will still listen for the child element.
• Other property values are SVG-specific and are not covered here.

Browser compatibility

Both Firefox 3.6+ and Chrome 2.0+, as well as Safari 4.0+, support this CSS3 attribute, which is not supported by the IE6/7/8/9, but not in HTML, which opera supports in SVG. Well, it's still a little sad.