Support event penetration? Use pointer-events style_html/css_WEB-ITnose

When using absolutely positioned elements so that element A completely covers element B, how can element A respond to events of element B?

The above picture can be achieved with the following SVG code:

<svg width="200" height="180">    <rect x="50" y="50" width="50" height="50" fill="#f34b5b" onclick="alert('Clicked')"></rect>    <rect x="20" y="20" width="160" height="140" fill="#FEDDCE" opacity="0.8"></rect></svg>

The first rect is completely covered by the second rect , so it cannot respond to the onclick event. In the traditional solution, we need to write JavaScript code to achieve event penetration, that is, first respond to the onclick event of the second rect element, and use the coordinate value to determine whether the click position is within the range of the first rect element, thereby deciding whether Triggers the onclick event of the first rect element. But if the relationship between graphics and graphics is relatively complex, the workload of writing the code yourself will be huge, and the code execution efficiency will not be high. Fortunately, we can solve this problem through a CSS style:

pointer-events: none;

By adding this style to the second rect element, the event penetration effect can be easily achieved. This style can be applied to any DOM node, and is applicable to all absolutely positioned elements. All modern mainstream browsers already support this style (IE11 has also been tested and supported).