【前端点击穿透】pointer-events属性详解

什么是pointer-events？

pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。

This CSS property,when set to “none” allows elements to not receive hover/click events,instead the event will occur on anything behind it.

当这个属性设置为none时，元素则不接收hover、click事件，由他后面的元素进行接收。

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only *//* Global values */
pointer-events: inherit;  从其父元素继承此属性
pointer-events: initial;  将此属性设置为其默认值

除去SVG的独有属性，其他是对浏览器来说生效的属性值。

做个demo

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>点击穿透demo</title><style>.box1 {width: 100px;height: 100px;background: #04BBD4;margin: 20px;z-index: 3;}.box2 {width: 100px;height: 100px;background: #090A0E;margin: -80px 40px 20px;z-index: 2;/* pointer-events: none; */}.box1:hover {background:#078404;}.box2:hover {background:#E98889;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>

未设置属性pointer-events

未设置属性的情况下，在光标移动到box1可以正常的触发hover，并且移动到box1和box2重叠的部分也是触发box1的hover。

设置box1属性pointer-events为none

设置属性的情况下，在光标移动到box1无法正常的触发hover，此时hover已经失效，移动到box1和box2重叠的部分则是触发box2的hover。

【前端点击穿透】pointer-events属性详解相关推荐

jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能
[目录] 明确需求 html分析代码实现 css分析 js分析代码实现只要是文本,长按选中就可以复制,但是需求来了挡也挡不住: 明确需求为了提升用户体验,点击[复制]按钮就自动复制到剪贴板,那 ...
前端点击按钮打印Excel
前端点击按钮打印Excel 实现思路太长不看版后端spire.xls将excel转为html,前端打印iframe 具体说明前端只能打印html文档已有的dom节点,无法直接打印Excel,那么 ...
前端点击移动生成小爱心
前端点击移动生成小爱心我之前看见一个博客,鼠标点击的时候会有不同颜色的小爱心出现,我就心血来潮试着写了一下,并且加了鼠标移动也会产生小爱心,放在这里目的是以后万一我要用方便找,写的不好请海涵. &l ...
nemesis什么车_狂野飙车9TrionNemesis介绍 S级车Trion复仇女神属性详解
狂野飙车9S级车Trion Nemesis介绍,狂野飙车9S级车Trion复仇女神属性详解,下面雨落就为大家带来狂野飙车9S级车Trion复仇女神的改装升级所需卡牌已经金币等攻略. [赛车属性]: S ...
【input 标签的 type 属性详解】
input 标签的 type 属性详解 1. input 输入标签的 type 属性 1.1 input 标签的 type类型属性的常用属性值 ⑴ 单行文本框: type="text&qu ...
Flash播放控件属性详解
Flash 播放控件属性详解一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
layui添加复选框_对layui初始化列表的CheckBox属性详解，初始化属性
对layui初始化列表的CheckBox属性详解,初始化属性通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式 ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...

【前端点击穿透】pointer-events属性详解

什么是pointer-events？

做个demo

未设置属性pointer-events

设置box1属性pointer-events为none

【前端点击穿透】pointer-events属性详解相关推荐

最新文章

热门文章