CSS3 quick click pointer-events property value detailed explanation

In fact, this property has been known for a long time, but has not been studied. I happened to see this word on twitter today, so I went to study it, and just solved a small problem I encountered so far, so I will share it. Well, it's actually a relatively simple CSS3 property.

In a certain project, many elements need to be positioned on a map layer, and many absolutely positioned or relatively positioned elements are used here, but in this case, these divs or other elements floating above will generally give a width and height, Or relative elements can be given no width and height. At this time, these elements will cover the underlying map layer, so that the map layer cannot be operated. . .

Then I happened to see a similar problem in Google map, as an example:

The operation area in the upper left corner of Google map is quite large, such as the red box area, and then the map layer cannot be operated in this area. Then we can set pointer-events:none to this div , and then you will find that the map below can be dragged and clicked.

But the tragedy is that the operation area itself cannot be operated, and is directly ignored. But don't worry, we can reset the elements inside to pointer-events:auto , of course, only set the locale for the elements that need to be manipulated.

It seems a bit tangled, but this ensures that the map itself maximizes the playable area.

Well, the above is just a simple example, let's take a 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 two values, auto and non, are available, and the others are for SVG (this attribute itself comes from SVG technology).

Detailed explanation of pointer-events attribute value

auto - the effect is the same as not defining the pointer-events property, the mouse will not penetrate the current layer. In SVG, this value has the same effect as visiblePainted.
none - the element is no longer the target of mouse events, and the mouse no longer listens to the current layer but to elements in the layer below. But if its child element sets pointer-events to another value, such as auto, the mouse will still listen to this child element.
Other attribute values are dedicated to SVG and will not be introduced here.

Browser Compatibility

Firefox 3.6+ and chrome 2.0+ and safari 4.0+ all support this CSS3 property, IE6/7/8/9 do not support this property, Opera supports this property in SVG but not in HTML. Well, it's still a little sad...

write picture description here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Label</title>
  <!--pointer-events-->
  <style>
    *{
      margin:0;
      padding:0;
    }
    #outer {
      width: 600px;
      height:600px;
      background: cadetblue;
      cursor: pointer;
    }
    #middle{
      position: absolute;
      left: 150px;
      top:150px;
      width: 400px;
      height:150px;
      border: 1px solid red;
      pointer-events: none;
    }
    #inner1{
      position: absolute;
      left: 20px;
      top:20px;
      width: 50px;
      height:50px;
      border-radius: 50%;
      background: #fff;
      pointer-events:auto;
      cursor: pointer;
    }
    #inner2{
      position: absolute;
      left: 180px;
      top:20px;
      width: 150px;
      height:50px;
      border-radius: 40px;
      background: #d4d4d4;
      pointer-events:auto;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="outer">
</div>
<div id="middle">
  <div id="inner1"></div>
  <div id="inner2"></div>
</div>
</body>
<script src="../lib/jquery.min.js"></script>
<script>
  $('#outer').on('click', function(){
    alert("I'm outer")
  });
  $('#inner1').on('click', function(){
    alert("I'm inner1")
  });
  $('#inner2').on('click', function(){
    alert("I'm inner2")
  })
</script>
</html>