CSS---后面学习到的属性(pointer-events)

前言

这个属性我上网了解了一下,是一个十分有用的属性,大家可以更加深入的去了解一下!!

基础了解

该属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
可选值有:
这里只挑第一个和第二个讲,因为后面都是只适用于SVG(我不会。。)

auto
与pointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同
none
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
visiblePainted
visibleFill
visibleStroke
visible
painted
fill
stroke
all

深入了解

这里我引用一个大家都在用的例子方便大家理解:
2
红色框区域是操作区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。
与此同时,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。

当把值设置为none后,他有如下相关特性:
1.阻止用户的点击动作产生任何效果
2.阻止缺省鼠标指针的显示
3.阻止CSS里的hover和active状态的变化触发事件
4.阻止JavaScript点击动作触发的事件

这里我们举个实际例子:

<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events">链接</a>
a{
  pointer-events: none;
        }

点击链接 时,不会跳转!!!

当然这个属性更多的还是用于那种雪花飘落的特效或者屏大地图等等,等后面我学习到了再来进行补充!!

8

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值