博客
关于我
(转)CSS3之pointer-events(屏蔽鼠标事件)属性说明
阅读量:797 次
发布时间:2023-04-04

本文共 940 字,大约阅读时间需要 3 分钟。

解决绝对定位元素遮挡后鼠标事件处理问题的方法

一、pointer-events 属性介绍

1. 属性值说明

pointer-events 是 CSS3 中新增的一个属性,其支持的值大多与 SVG 有关,但对我们常规 Web 开发来说,主要关注的两个值是 noneauto

1.1 auto

默认情况下,当未指定 pointer-events 属性时,元素会继承 default behavior。这种情况下,元素会成为鼠标事件的目标,能够正常处理事件。

1.2 none

设置 pointer-events: none 后,该元素将永远不会成为鼠标事件的目标。然而,这种情况并不意味着该元素上的事件侦听器永远不会被触发。如果该元素的后代元素明确指定了 pointer-events 属性并允许其成为事件目标,那么指向该元素的事件在传播过程中会通过父元素,进而触发后代元素的事件侦听器。需要注意的是,位于屏幕上方的父元素和下方的后代元素之间的区域,鼠标活动不会同时捕获父元素和后代元素(除非父元素的 pointer-events 属性允许后代元素处理事件)。

2. 浏览器兼容情况

2.1 桌面浏览器

  • IE: 11+(IE6-10 不支持)
  • Firefox: 3.6+
  • Chrome: 4.0+
  • Safari: 6.0+
  • Opera: 15.0+

2.2 移动设备浏览器

  • iOS Safari: 6.0+
  • Android Browser: 2.1+
  • Android Chrome: 18.0+

二、使用样例

1. 使链接无法点击

通过设置 pointer-events: none 可以实现以下效果: - 链接无法被点击 - 没有鼠标手形效果(悬停效果也会消失) 这种方法可以避免按钮重复点击、表单重复提交等问题。

可以点击的链接         不能点击的链接

2. 让鼠标点击穿透上方的 div

场景描述: - 黄色半透明的 div 使用绝对定位覆盖在下方链接上方。 - 默认情况下,黄色区域下方的链接无法被点击。 - 通过设置 pointer-events: none 可以让鼠标事件穿透黄色 div,仍然可以点击下方链接。

航歌         hangge.com

转载地址:http://lnrfk.baihongyu.com/

你可能感兴趣的文章
mysql_secure_installation初始化数据库报Access denied
查看>>
MySQL_西安11月销售昨日未上架的产品_20161212
查看>>
Mysql——深入浅出InnoDB底层原理
查看>>
MySQL“被动”性能优化汇总
查看>>
MySQL、HBase 和 Elasticsearch:特点与区别详解
查看>>
MySQL、Redis高频面试题汇总
查看>>
MYSQL、SQL Server、Oracle数据库排序空值null问题及其解决办法
查看>>
mysql一个字段为空时使用另一个字段排序
查看>>
MySQL一个表A中多个字段关联了表B的ID,如何关联查询?
查看>>
MYSQL一直显示正在启动
查看>>
MySQL一站到底!华为首发MySQL进阶宝典,基础+优化+源码+架构+实战五飞
查看>>
MySQL万字总结!超详细!
查看>>
Mysql下载以及安装(新手入门,超详细)
查看>>
MySQL不会性能调优?看看这份清华架构师编写的MySQL性能优化手册吧
查看>>
MySQL不同字符集及排序规则详解:业务场景下的最佳选
查看>>
Mysql不同官方版本对比
查看>>
MySQL与Informix数据库中的同义表创建:深入解析与比较
查看>>
mysql与mem_细说 MySQL 之 MEM_ROOT
查看>>
MySQL与Oracle的数据迁移注意事项,另附转换工具链接
查看>>
mysql丢失更新问题
查看>>