css的pointer-events属性(点透)

pointer-events CSS 属性

指定在什么情况下某个特定的图形元素可以成为鼠标事件的 target,也就是说他可以设置一个元素是否可以触发事件

语法:

pointer-events: auto
默认值,与pointer-events属性未指定时的表现效果相同

pointer-events: none
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
设置了这个属性,用户的点击动作不会产生任何效果,如果他绝对定位在另一个元素上,那么点击动作可以透过它触发另一个元素身上的点击事件

提示

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然,位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获

兼容性

对IE的兼容性一般,  只支持11+以上的版
移动端兼容:
Opera for Android:支持
Firefox for Android:4
Safari on iOS:3.2

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,526评论 1 11
  • pointer-events 可选的属性值 auto none visiblepainted visiblefil...
    FoolishFlyFox阅读 16,685评论 0 10
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,149评论 0 21
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,360评论 0 8
  • 本篇博客源地址 总结: 鼠标事件 1.click与dbclick事件ele.click()ele.click(ha...
    ZombieBrandg阅读 682评论 0 1