之前有一次美团的面试，面试官问我：如果有两个元素，一个元素掩盖到另一个元素上，如何做到点击上面的元素触发下面的元素？ 其时的我在作业生计中其实并没遇到过这种问题，也没有想到为什么会有这种情况的出现，也只是凭着自己的作业经验想出一个能够经过父子元素冒泡的做法完结这个做法，面试官虽然这个办法的确能够完结这个需求，我向他询问应该如何完结这个功用的时分，才首次认识了咱们在这篇文章中要了解的pointer-events特点。

pointer-event是什么？有什么作用？

pointer-events 特点用于设置元素是否对鼠标事情做出反响。 默认值为auto，便是元素对鼠标事情做出反响，可设置为pointer-events: none; 表示元素疏忽鼠标事情。

用最简单的话来说，只要设置了pointer-events: none; 任何鼠标事情都将被无效化（例如：点击事情、鼠标移入移除、css的hover等）。

让咱们上代码来看下没有设置pointer-events: none; 的作用是什么

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	#demo {
		width: 200px;
		height: 200px;
		background-color: aqua;
		text-align: center;
		line-height: 200px;
	}
	#demo:hover {
		background-color: bisque;
	}
</style>
<body>
	<div id="demo">我是测验的div</div>
	<script>
		const demo = document.getElementById('demo');
		demo.onclick = e => {
			console.log('点击了');
		};
		demo.onmouseenter = e => {
			console.log('移入了');
		};
		demo.onmouseleave = e => {
			console.log('移出了');
		}
	</script>
</body>
</html>

上面的代码写了一个div元素，咱们在这个元素上绑定了点击、鼠标移入、鼠标移出这三个js鼠标事情，并在css上绑定了hover款式，鼠标进入会改动元素的布景色，现在这个demo是这个姿态的

这个便是正常咱们元素对鼠标事情响应的姿态，接下来咱们在demo元素上加上pointer-events: none; 特点 看一下是什么姿态

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	#demo {
		width: 200px;
		height: 200px;
		background-color: aqua;
		text-align: center;
		line-height: 200px;
		pointer-events: none;
	}
	#demo:hover {
		background-color: bisque;
	}
</style>
<body>
	<div id="demo">我是测验的div</div>
	<script>
		const demo = document.getElementById('demo');
		demo.onclick = e => {
			console.log('点击了');
		};
		demo.onmouseenter = e => {
			console.log('移入了');
		};
		demo.onmouseleave = e => {
			console.log('移出了');
		}
	</script>
</body>
</html>

上面代码仅增加了一行pointer-events: none; 接下来咱们看看元素对于鼠标事情是什么反响

咱们能够看到代码中的js鼠标事以及hover全部都无效化了，元素没有对以上操作做出反响（鼠标点击选中文字是能够的）

现在咱们知道了pointer-events的作用了，那咱们来做一下文章最初说的面试题吧 一个元素掩盖在另一个元素，点击上面的元素触发下面元素的点击事情。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	#demo {
		width: 350px;
		height: 400px;
		background-color: #f3f3f3;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		color: red;
	}
	#bottom {
		width: 200px;
		height: 200px;
		background-color: red;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		color: azure;
	}
	#top {
		width: 300px;
		height: 300px;
		background-color: yellow;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.4;
		z-index: 2;
		color: black;
	}
</style>
<body>
	<div id="demo">
		我是父元素盒子
		<div id="bottom">我是下面的元素</div>
		<div id="top">我是上面的元素</div>
	</div>
	<script>
		const bottom = document.getElementById('bottom');
		bottom.onclick = e => {
			console.log('点击了');
		};
		bottom.onmouseenter = e => {
			console.log('移入了');
		};
		bottom.onmouseleave = e => {
			console.log('移出了');
		}
	</script>
</body>
</html>

在最上层盒子上加上 pointer-events: none; 之后

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	#demo {
		width: 350px;
		height: 400px;
		background-color: #f3f3f3;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		color: red;
	}
	#bottom {
		width: 200px;
		height: 200px;
		background-color: red;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		color: azure;
	}
	#top {
		width: 300px;
		height: 300px;
		background-color: yellow;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.4;
		z-index: 2;
		color: black;
		pointer-events: none;
	}
</style>
<body>
	<div id="demo">
		我是父元素盒子
		<div id="bottom">我是下面的元素</div>
		<div id="top">我是上面的元素</div>
	</div>
	<script>
		const bottom = document.getElementById('bottom');
		bottom.onclick = e => {
			console.log('点击了');
		};
		bottom.onmouseenter = e => {
			console.log('移入了');
		};
		bottom.onmouseleave = e => {
			console.log('移出了');
		}
	</script>
</body>
</html>

猴赛雷的pointer-events，一个你能够用不到可是不能不知道的 CSS特点

pointer-events 的基础知识咱们就说完了，附上一个最近在实际作业中运用pointer-events完结的一个功用模块的图片吧（作业代码就不展现了，就作为是一个运用场景，以后有这种需求的话能够用pointer-events进行完结）。

需求：有一个球场的图片，里面分割了很多模块，点击某一模块展现一个模块被选中的款式。

其时的榜首想法便是布景图上掩盖元素，图片上有24个模块，只需要循环24个元素掩盖到上面，点击的时分某个模块展现被选中的款式就好，做出来的作用便是这样的

这么做的问题便是，整个布景图都会被掩盖掉，球场线根本就看不到，尤其是我全都选中之后，根本就看不出这是个球场了，所以就稍加改动，让布景图掩盖我要展现选中的元素上面，经过给布景图地点元素上增加pointer-events: none; 即可完美的完结咱们要完结的功用了