咱先来解决问题然后再了解是怎摸个原理在了解他的兼容性
一、解决方案：可以最上面图层的样式添加 pointer-events: none
二、这个 pointer-events: none 具体是什么个东西呢？
pointer-events 直译为指针事件，该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。
简而言之，就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件)
他当然不止一个属性值还有其他的某些属性值。
/* Keyword values（属性值） */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */
/* Global values（全局值）*/
pointer-events: inherit; （从其父元素继承此属性）
pointer-events: initial; （将此属性设置为其默认值）
pointer-events: unset;三、看了是不是看不大懂只是属性值不一样 那咱就继续
pointer-events:visiblePainted只适用于 SVG，元素只有在以下情况才会成为鼠标事件的目标：
- visibility 属性值为 visible，且鼠标指针在元素内部，且 fill 属性指定了 none 之外的值
- visibility 属性值为 visible，鼠标指针在元素边界上，且 stroke 属性指定了 none 之外的值
pointer-events: visibleFill只适用于 SVG，只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 属性的值不影响事件处理。
pointer-events: visibleStroke只适用于 SVG，只有在元素 visibility 属性值为 visible，且鼠标指针在元素边界时，元素才会成为鼠标事件的目标，stroke 属性的值不影响事件处理。
pointer-events:visible只适用于 SVG，只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill 和 stroke 属性的值不影响事件处理。
pointer-events:painted只适用于 SVG，元素只有在以下情况才会成为鼠标事件的目标：
- 鼠标指针在元素内部，且 fill 属性指定了 none 之外的值
- 鼠标指针在元素边界上，且 stroke 属性指定了 none 之外的值
visibility 属性的值不影响事件处理。
pointer-events:fill只适用于 SVG，只有鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 和 visibility 属性的值不影响事件处理。
pointer-events:stroke只适用于 SVG，只有鼠标指针在元素边界上时，元素才会成为鼠标事件的目标，stroke 和 visibility 属性的值不影响事件处理。文章来源：https://www.toymoban.com/news/detail-495895.html
pointer-events:all只适用于 SVG，只有鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill、stroke 和 visibility 属性的值不影响事件处理。文章来源地址https://www.toymoban.com/news/detail-495895.html
四、兼容性
- IE 11+
- Firefox 3.6＋
- Chrome 4.0+
- Safari 6.0
- Opera 15.0
- iOS Safari 6.0
- Android Browser 2.1+
- Android Chrome 18.0+
到了这里，关于如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
