咱先来解决问题然后再了解是怎摸个原理在了解他的兼容性

一、解决方案：可以最上面图层的样式添加 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 属性的值不影响事件处理。

pointer-events:all

只适用于 SVG，只有鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill、stroke 和 visibility 属性的值不影响事件处理。

四、兼容性

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+

如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）相关推荐

天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件
前面几篇文章主要是讲了加载天地图.在天地点上循环加载标注点并给标注点添加事件.根据标注点坐标确定地图的显示范围.在天地图显示坐标轨迹以及在天地图上画多边形,电子范围. 本文再讲一点复杂操作. 1.在 ...
部分样式在360和ie上不能显示_Adobe Photoshop添加图层样式全方面介绍
PS基础学习第六期图层样式详解图层样式是指图形图像处理软件Photoshop中的一项图层处理功能,是后期制作图片以期达到预定效果的重要手段之一. 图层样式的功能强大,能够简单快捷地制作出各种立体投 ...
ps怎么把图片上面的字去掉
现在很多的图片大部分都需要一定的处理,今天就来和下小编一起来学习一下ps怎么把图片上面的字去掉工具/原料 pscs6 电脑方法/步骤首先我们需要在电脑桌面上找到我们需要的ps软件,只有找到之后我 ...
ps批量修改名片文字_怎么修改图片上的文字修改图片文字比如名片图片上面的地址需要修改下...
现在在网络上下载的图片是不是都对有文字水印的咧是不,那么怎么修改图片上的文字呢,修改图片文字比如名片图片上面的地址需要修改下这些怎么完成?OK ,今天就让小编来给大伙科普一下,其实要做到真正的无痕迹修 ...
如何删除windows上面的jdk文件
将要面临就业的我重新拾起了大二期间学过的java,但是发现原来安装在系统里面的java运行环境不知道为什么不能用了,我是这样发现的:打开cmd,然后输入java,结果提示这样: 看提示应该是里面的某个 ...
python可视化多个机器学习模型在独立测试集（test data set）上面的AUC值、可视化模型效能
python可视化多个机器学习模型在独立测试集(test data set)上面的AUC值.可视化模型效能 # x_lables为模型名称列表,包括,逻辑回归.朴素贝叶斯.支持向量机.随机森林.xgb ...
SAP HU上面的'Obj.to Which HU Belongs'栏位初探
SAP HU上面的'Obj.to Which HU Belongs'栏位初探 HU02,创建一个新的HU, 保存之, HU03显示这个HU 189141203942, 其'obj.to Which H ...
解决RecyclerView在ScrollView中会置顶它上面的控件
通常情况下,需要在RecyclerView上加布局可以通过自己定义adapter然后add header来添加. 但是也还有一种方法来实现,那就是用ScrollView来嵌套,比如这样的代码: < ...
抓球球的机器人应该怎么玩_闲鱼2019年应该怎么玩？闲鱼上面的几大规则
闲鱼2019年应该怎么玩?闲鱼上面的几大规则如今已经是2019年了,还是有好一些的伙伴们在求闲鱼流量,闲鱼新的一年是不是有什么大的改动,还可以照着往年的玩法继续做闲鱼吗,对于这样的问题,我实在有些看 ...

如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）

一、解决方案：可以最上面图层的样式添加 pointer-events: none

二、这个 pointer-events: none 具体是什么个东西呢？

三、看了是不是看不大懂只是属性值不一样那咱就继续

四、兼容性

如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）相关推荐

最新文章

热门文章

如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）

一、解决方案：可以最上面图层的样式添加 pointer-events: none

二、这个 pointer-events: none 具体是什么个东西呢？

三、看了是不是看不大懂只是属性值不一样 那咱就继续

四、兼容性

如何实现让最上面的图层不影响下面图层的点击事件（可穿透图层的鼠标事件）相关推荐

最新文章

热门文章

三、看了是不是看不大懂只是属性值不一样那咱就继续