Css3 pointer-events

Posted 2021-04-09 冰苏打奶盖

CSS新属性pointer-events：字面理解是点击鼠标事件，值分别是auto和none。

pointer-events：auto| none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

pointer-events 更像是javascript，它能够：

• 阻止用户的点击动作产生任何效果

• 阻止缺省鼠标指针的显示

• 阻止CSS里的 hover 和 active 状态的变化触发事件

• 阻止JavaScript点击动作触发的事件

  
  

实际代码使用中案例：

• 提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止重复提交。

• 一些层的绝对定位，覆盖按钮，穿透可以点击它。

pointer-events属性值详解：

• auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

• none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

---

以上内容来自

在项目中遇到的问题是这样的：鼠标放置在元素上显示听提示或标签，但是会出现闪动问题（闪瞎眼），就可以使用这个属性解决，在标签或轻提示元素上添加:

pointer-events:none;

阻止鼠标事件即可。

---

绕口令时间:

昨天晚上刷抖音看到一个大小姐教钟汉良绕口令的视频，内容是这样的：

冰子橙子橘子柿子李子栗子梨

小心舌头打结

最后来一个奶盖

ending