穿透的div——pointer-events:none

一、 定义:css3属性

元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
说明:只能屏蔽鼠标事件,不能屏蔽键盘事件例如tab和enter,屏蔽事件也不是永久,后代指定属性时可能在冒泡时会有影响。

二、兼容

谷歌,火狐支持,ie11以上

三、 使用

  <a href="" style="pointer-events:none">啦啦啦,你点不了我</a>

屏蔽了鼠标事件,但是tab仍然可以选中
更多使用详见 张鑫旭的应用扩展

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

推荐阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,758评论 24 450
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,361评论 0 8
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,551评论 1 19
  • 金指尖的花园阅读 260评论 0 3
  • 列车进入南京的时候,正值午夜,宣扬宿命论的文字预言过,这个时刻,用以安慰,然后离别。我想这样的散场,是被安排...
    闫红亮319阅读 526评论 0 1