CSS3中pointer-events属性和cursor属性-使用案例

pointer-events 属性定义元素是否对指针事件做出反应属性:auto—效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。none—元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。Jav

JackieDYH

2598人浏览 · 2021-04-12 17:50:32

JackieDYH · 2021-04-12 17:50:32 发布

pointer-events 属性定义元素是否对指针事件做出反应

属性:

auto—效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
none—元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

JavaScript 语法：object.style.pointerEvents="none"

属性值	描述
auto	默认值。元素对指针事件做出反应，比如 :hover 和 click。
none	元素不对指针事件做出反应。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

鼠标禁用

阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的 hover 和 active 状态的变化触发事件
阻止JavaScript点击动作触发的事件

cursor:not-allowed;//MDN解释：不能执行

cursor:no-drop;// MDN解释：当前位置不能扔下 Windows或Mac OS X中 "no-drop 与not-allowed相同".

案例-在线测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>pointer-events</title>
		<style type="text/css">
			div.ex1 {
				pointer-events: none;
				
				/* cursor: default; */
				cursor:not-allowed;
				opacity: 0.6;
			}

			div.ex2 {
				pointer-events: auto;
			}
		</style>
	</head>
	<body>
		<h1>pointer-events 属性</h1>

		<p>请把鼠标指针移至下面的链接，查看是否对指针事件做出反应：</p>
		<code>
			cursor:not-allowed;//MDN解释：不能执行<br>
			cursor:no-drop;// MDN解释：当前位置不能扔下   Windows或Mac OS X中 "no-drop 与not-allowed相同".
		</code>

		<h2>pointer-events: none：</h2>
		<div class="ex1">访问 <a href="https://jackiehao.blog.csdn.net/">教程</a></div>

		<h2>pointer-events: auto（默认）</h2>
		<div class="ex2">访问 <a href="https://jackiedyh.github.io/">博客</a></div>
	</body>
</html>