pointer-events 穿透 适用于 高z-index 点击低z-index的事件

已于 2022-03-07 16:37:02 修改
阅读量1.1k 收藏
点赞数 1
分类专栏： 前端 文章标签： webpack 前端 node.js
于 2020-09-02 10:21:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csstmg/article/details/108357053
版权

pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events

图标的维度高于要点击维度 就用pointer-events

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试

csstmg
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用css3：pointer-events，允许点击穿透
柯闪电，一位前端小白的博客。
02-27 1221
背景 年前产品提了个需求，希望在页面元素最上层加上灯笼与下雪的动画，并且不影响下层元素的滑动与点击操作。于是，这个css3属性就登场了 属性介绍 pointer-events MDN上的属性介绍：The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. 我的粗浅理解： 定义了这个属性的元
z-index为负值的元素无法点击到的解决方法
09-22
主要介绍了z-index为负值的元素无法点击到的解决方法,需要的朋友可以参考下
ie下元素被覆盖且设置z-index无效的解决办法
WanweI897的博客
10-15 248
ie下给元素设置 z-index 高于另一个元素但还是被覆盖，而且ie11以下又不支持 pointer-events 属性，导致元素无法点击。 可以试试给该元素设置定位属性如 position: relative 等;
vue中的事件穿透与禁止穿透
热门推荐
rainbow8300的博客
10-31 5万+
在开发过程中经常遇到的一个场景，就是，页面弹窗，弹窗上有一个确定或者关闭按钮,这时，如果下方有一个按钮，那你点击弹窗的时候，也会触发弹窗下层的按钮事件，vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是，直接在事件的方法中添加event.stopPropaga...
z-index上层元素遮挡下层元素点击事件解决
m0_73332015的博客
12-06 703
z-index上层元素遮挡下层元素点击事件解决
css设置穿透元素
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
10-11 2283
css设置穿透元素
使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
09-24
当pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
css中pointer-events属性详解
09-25
当`.pointer`类存在时，`.overlay1`和`.overlay2`的`pointer-events`属性被设置为`none`，从而使鼠标能够穿透这两个div，进而触发下方链接和`<span>`的事件。 这个例子展示了`pointer-events`在解决层叠元素交互...
css pointer-events属性实现下面元素可点击
09-25
是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。
CSS的pointer-events属性详细介绍（作用和注意事项）
09-25
当`pointer-events`设为`none`时，元素将不会响应点击、悬停等鼠标事件，同时不会显示默认的鼠标指针。例如，以下CSS代码将使得所有`.disabled`类的元素失去鼠标交互： ```css .disabled { pointer-events: none; ...
z-index为-1时不能点击组件的解决的解决办法
u013164983的博客
06-16 2977
1. z-index设为0. 主区域设为position:relative; z-index: 1;这样能保证背景层不会影响主区域，并且在主区域外的部分也可以点击。 <template> <div> <div class="bar"> <div class="content"> </div> </template> <style scoped> .bar { position:relative;
pointer-events 穿透属性本层盒子 ，鼠标作用于下面盒子
最新发布
2301_76627020的博客
01-11 503
当鼠标想要作用于有遮罩层盒子的下面的一个个下盒子时，使用该属性即可解决。例如： pointer-events: none;悬浮最外层的盒子，鼠标穿透属性,
微信小程序-绝对定位元素z-index:-1后定位元素的点击事件无法触发
小柒的博客
08-10 6112
原因分析： 当元素的bfc层级设置为z-index:-1后，这个元素的层级就是当前浏览器的3d视图中z轴层级最低的元素，所以这个时候从视觉效果看起来是点击了绝对定位元素，但实际上点击事件是触发的html根元素下的bfc渲染区的元素 解决方法： 1.使用事件捕获机制，给被点击的空白区域的元素设置事件监听，将事件传递给绝对定位元素(不推荐) 2.保持绝对定位元素的默认层级，将被覆盖的元素的层级...
css中的层级问题详解
g_hold的博客
07-02 2855
层级问题  （谁高）总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。定位高于浮动，浮动高于标准流。（高低和占不占位置无关）（除去static之外）。z-index的用法：      1、必须有定位。（除去static之外）。      2、给定z-index的值为层级的值。（不给默认为0）    （层级为0的盒子，也比标准流和浮动高。）    （层级为负数的盒子，比标准流和浮动低。）...
css 设置层级关系,css层级关系怎么设置
weixin_30623181的博客
08-04 1万+
在css中，可以利用z-index属性来设置层级，该属性可以设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；语法格式“z-index:数值;”，允许使用负值。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。在css中，可以利用z-index属性来设置层级。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素...
小程序 textarea、input 层级过高，导致填写内容穿透，z-index无效问题解决方案。
流沙溪
09-28 1万+
小程序的textare、input输入框层级是最高的 那么我们在textare、input输入的内容就会总是显示在最上一层。 这是时为什么呢？官方文档有说明，因为textare、input这些是原生组件。原生组件的层级是最高的，不管其它非原生组件z-index设置多大，原生组件都无法覆盖在原生组件上。想了很久终于想到个办法，但是并不完美。   思路：textarea输入完成时，将te...
一个css中z-index的用法
weixin_30861797的博客
06-10 600
CSS教程：彻底掌握Z-index属性 大多数的CSS属性都很容易使用。常常，当您对标记语言的元素使用CSS属性时，产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性，却会有一些复杂，且只能在给定的环境下才会工作。 Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致（兼容性）上的混乱和（开发者心理上）的挫败感。但滑稽的是，一旦...
js点击事件穿透
Mh_ui的博客
11-17 8939
<div class="out" @click="out()"> <div class="in" @click="in()"></div> </div> // 穿透点击（点击in的区域触发out） .in { pointer-events: none; } // 阻止穿透 （点击in的区域不会触发out） function in () { event.stopPropagation(); } ...
pointer-events 穿透
07-28
- *1* [css：css属性pointer-events实现点击穿透](https://blog.csdn.net/mouday/article/details/128209912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值