让所有默认事件失效

在制作大屏项目时,遇到地图周围有其他元素导致无法正常缩放地图的问题。通过CSS的pointer-events属性,可以设置为none让不需要交互的元素不响应点击事件,而保持在上方显示。pointer-events:auto和none的使用,巧妙地解决了这个问题,使得地图与周围元素能和谐共存。
摘要由CSDN通过智能技术生成

1.使用方式

CSS 语法

pointer-events: auto|none;

div.ex1 {
  pointer-events: none;
}

div.ex2 {
  pointer-events: auto;
}

2.官网介绍

官方简介

属性值描述
auto默认值。元素对指针事件做出反应,比如 :hover 和 click。
none元素不对指针事件做出反应。
initial将此属性设置为其默认值
inherit从其父元素继承此属性。

总结

最近做大屏的中间地图。因为地图周围定位了很多的效果和一些图片,导致点击到图片之后地图就无法缩放,但是把地图放在图片上面的话,图片会导致图片看不到,这时候这个属性的用处就来了,给不需要点击还想要显示在上方的元素添加这个属性,大功告成!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鸿蒙灬磊磊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值