div 穿透

最新推荐文章于 2024-05-10 15:47:34 发布
最新推荐文章于 2024-05-10 15:47:34 发布
阅读量128 收藏
点赞数
分类专栏： vue3随手记 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75107188/article/details/132668805
版权

前提问题：某一个div区域，是两层div的叠加，现需要在点击上层div时不触发上层div的方法，需要触发下层div的方法

解决过程：使用pointer-events属性可达到效果，当属性值为auto时，可触发上层事件，属性值为none时，可触发下层事件

解决结果：

pointer-events:auto //响应上层(子组件)鼠标事件

pointer-events:none //响应下层(父组件)鼠标事件

 pointer-events:none能让浏览器在处理鼠标操作时，忽视当前元素，直接穿透到当前点击区域背后的元素上

-小C_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于vue组件事件属性穿透详解
12-13
组件事件属性穿透 属性 $attrs包含从父组件传过来的属性，但不包含子组件中prop中的属性以及class和style，所以对于那些html元素原生属性，可以不用再子组件中声明，直接从父组件中传进来就好 // 子组件 <template> <div> <input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/> </div> </template> props: { test: { type: String, default: '123456' } }, created () {
div 嵌套 事件穿透
iteye_1540的博客
04-22 400
1.当多个div嵌套时候，点击最里层的div，会调用外层div的事件。 2.一般的开发者都知道ie6,7,8中如果两个div有层叠关系,上层的div背景透明,且没有内容,那么下层div在某些情况下就可以响应点击在上层的事件,也就是说,上层的div被穿透了. 如果在此时要响应上层的事件，可以在上层的内容加个空白&amp;nbsp;        一般来说,下层div可以响应点击的区域如下:...
div穿透事件(pointer-events)
song_song0927的博客
05-18 1749
穿透上层div执行下层div的事件
穿透的 div ( pointer-events )
weixin_30251587的博客
06-05 269
pointer-events是一个满有趣的CSS3属性，虽然主要是针对SVG ，但其中几个属性应用在div上也是颇有意思。顾名思义，这是一个针对鼠标滑动事件的属性，预设值为auto，若值为none，则可以穿越该元素，点击到下方的元素。除了auto和none，这是完整的属性列表：pointer-events: auto | none | visiblePainted | visibleFi...
div穿透
anpan6225的博客
04-23 265
当你有2个div叠在一起时，一般是下面的div显示主要内容如图片，上面div显示说明。 但是你往往有一个连接在下面的div上，然而由于特殊原因你上面的div会完全盖住底下的。此时点击不能。 此时有一个css属性可以调节：pointer-events。前提是上面的div有很多的空白，没有背景颜色没有背景图片等。 上面的div可以用pointer-events: none; 此时上面...
div点击穿透，阻止穿透
qq_34164814的博客
10-10 2万+
div点击穿透，上层的点击作用不起作用 html &lt;div class="aa"&gt; &lt;/div&gt; &lt;div class="bb"&gt; &lt;/div&gt; .aa{ position: absolute; top:0; width:100px; height: 100px; } .bb{ position: absolute; top...
穿透div层
aithena的博客
12-08 369
穿透div层 a { pointer-events: none; } div { pointer-events: auto; }
div增加鼠标点透，css设置点击穿透
木木木华的博客
02-23 5667
div增加鼠标点透，css设置点击穿透
解决IE6 中select 穿透 div 等层的问题
01-17
解决IE6 中select 穿透 div 等层的问题
用DIV遮罩解决鼠标直接勾选checkbox无效的问题
09-28
将click事件放到了DIV上，鼠标点击div一切正常，但鼠标直接勾选checkbox不正常，跟踪调试，原因至今未查到，下面是另辟蹊径的解决方法
解决移动端滚动穿透问题
05-31
移动端当弹出遮罩层滚动时，底部禁止滚动，完美解决穿透问题
解决DIV在IE下被下拉列表select穿透的问题(一)
03-01
jQuery.contextbox示例 博文链接：https://lxy19791111.iteye.com/blog/285162
解决DIV在IE下被下拉列表select穿透的问题(二)
03-01
jquery.bgiframe示例 博文链接：https://lxy19791111.iteye.com/blog/285177
div阻止点击穿透+实现点击穿透
热门推荐
cbat的博客
09-06 5万+
div阻止点击穿透+实现点击穿透
div点击穿透事件的处理
HDdgut的博客
05-09 2118
第一种，因为是冒泡了，所以阻止冒泡 第二种，因为div2覆盖在div1里面，所以不管你点击那个地方，都是触发了div1的区域，所以当点击的时候，判断这个区域是不是div2的区域，如果是的话，就触发div2，如果不是的话就触发div1 转自：https://www.cnblogs.com/lwwen/p/7278761.html 小程序在大的层绑定点击事件，不但父层要个参数，每个子层都要给参数，data-cid，不然放在父层，子层获取不到参数。 ...
vue3中的reactive和ref
weixin_43784341的博客
05-08 509
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
根据地址栏url上key获取值
最新发布
wwf1225的博客
05-10 156
/ 根据url上key获取值，key为参数名字，例如token。
ant design vue 的table中template中的div穿透出表格
06-08
如果你想要修改 Ant Design Vue 的 Table 组件中 Template 中的 div 标签的样式，可以使用 CSS 的样式穿透（CSS deep selector）。样式穿透可以让你的样式在作用域内生效，同时不影响全局样式。 以下是一个简单的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值