css属性阻止鼠标事件及鼠标指针的显示

╰+攻爆jí腚メ 2023-01-19 11:52 1阅读 0赞

#### CSS属性：`pointer-events` ####

w3school 的定义是：设置元素是否对指针事件做出反应。

<table> 
 <thead> 
  <tr> 
   <th align="center">属性值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">auto</td> 
   <td align="left">默认值。元素对指针事件做出反应。</td> 
  </tr> 
  <tr> 
   <td align="center">none</td> 
   <td align="left">元素不对指针事件做出反应。</td> 
  </tr> 
  <tr> 
   <td align="center">initial</td> 
   <td align="left">将此属性设置为其默认值，即auto</td> 
  </tr> 
  <tr> 
   <td align="center">inherit</td> 
   <td align="left">从其父元素继承此属性。</td> 
  </tr> 
 </tbody> 
</table>

此属性为继承性属性。如果父元素设置`pointer-events: none;`以阻止指针事件，要想子元素有指针事件必须设置`pointer-events: auto;`

##### 示例：要实现的效果是蒙版不遮挡按钮，且蒙版上的按钮可点击。 #####

![实现效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgyOTcxOQ_size_16_color_FFFFFF_t_70_pic_center]  
上代码:

<body>
    	<div class="poup">
    		<button onclick="alert('我是蒙版按钮')" type="button">蒙版上的按钮</button>
    	</div>
    	<div class="container">
    		<div><button onclick="alert('我是第一个按钮')" type="button">我是第一个按钮</button></div>
    		<div><button onclick="alert('我是第二个按钮')" type="button">我是第二个按钮</button></div>
    		<div><button onclick="alert('我是第三个按钮')" type="button">我是第三个按钮</button></div>
    	</div>
    </body>

*{ 
    	margin: 0;padding: 0;
    }
    .container{ 
    	height: 300px;
    	width: 100%;
    	background: rgba(253,242,200,0.3);
    }
    .container div{ 
    	padding: 30px;
    	text-align: center;
    }
    .container button{ 
    	cursor: pointer;
    }
    .poup{ 
    	position: fixed;
    	top: 0;left: 0;
    	width: 100%;height: 100px;
    	background-color: rgba(0,0,0,0.2);
    }
    .poup button{ 
    	margin: 30px;
    	cursor: pointer;
    }

我们运行到浏览器上发现效果是这样的：蒙版遮挡住了第一个那妞，且蒙版上的按钮可点击

![默认效果][20210609110341129.gif_pic_center]  
为了实现蒙版不遮挡第一个按钮，我们给`.poup`添加`pointer-events: none;`属性。实现效果如图：

![蒙版添加pointer-events: none;][pointer-events_ none]  
我们发现此时蒙版不遮挡按钮了，但是蒙版上的按钮也没有了点击事件，所以我们给`.poup button`添加`pointer-events: auto;`属性。实现效果如图：

![实现效果][20210609110733410.gif_pic_center]  
这样就实现了我们想要的结果，示例完成。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgyOTcxOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/cce2de9bfdb54a16ba6237d58307dd44.png
[20210609110341129.gif_pic_center]: /images/20221021/32da4f00e8d5496fbe477c71dec20a49.png
[pointer-events_ none]: /images/20221021/3ba1f1742c9e479eb85e6686ef0fcad3.png
[20210609110733410.gif_pic_center]: /images/20221021/c5f7dae59be048b395f664a694becb5c.png