pointerEvents-让事件穿透层

最新推荐文章于 2024-06-30 18:20:39 发布

莫冲

最新推荐文章于 2024-06-30 18:20:39 发布

阅读量768

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/mochong/article/details/84464764

版权

参考资料：
http://www.qianduan.net/css3-pointer-event-description.html
http://css-tricks.com/including-navigation-code-on-all-pages-even-with-current-navigation-highlighting/
http://www.cnblogs.com/meteoric_cry/archive/2011/07/03/2096971.html
http://www.vinylfox.com/forwarding-mouse-events-through-layers/

之前考虑怎么在html中做事件穿透，比如有两个同层次的div，如何让底层的div能执行监听事件。

今天偶然看到css有这么一个参数可以设置：pointerEvents

解决这样的问题有以下方案：

1、纯使用CSS的属性pointer-events，设置其为none (默认为auto)

优点：无需额外的代码

缺点：不支持IE(IE不支持此属性，IE9是否支持有待考评..)

2、捕捉事件获取鼠标的位置X、Y，然后触发层级较低元素的相应事件 (平时我们用调试工具选取页面中的元素，高亮显示的区域就是依据这个原理)

优点：兼容各浏览器

缺点：需要编写Javascript，效率并不高

这样获取有也有两种处理方法：

循环获取每一个元素的位置，然后对比鼠标的X、Y，效率低，不推荐；这里推荐使用elementFromPoint（浏览器都支持），直接传入X、Y，便可直接获取相应的DOM元素

我的DEMO：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<script src="jquery-1.9.1.min.js"></script>
		<style>
			#mainPage div {
				position:absolute;
				color:#999;
			}
			#slideshowWrap {
				top:200px;
				left:0px;
				width: 200px;
				height:200px;
				z-index: 0;
				background-color:blue;
			}

			#scrollWrap {
				z-index: 2;
				top:0px;
				left:0px;
				width:200px;
				height:400px;
				background-color:yellow;
				pointer-events: none;
			}

			#slideshowBtn {
				z-index:1;
				width: 20px;
				height:20px;
				top:200px;
				left:180px;
				background-color:black;
			}

			#scrollBtn {
				top:380px;
				left:90px;
				width: 20px;
				height:20px;
				background-color:black;
				pointer-events: auto;
			}

		</style>

		<script>
			$(document).ready(function () {
				var TOP_INDEX = 99,
					scrollWrap = document.getElementById("scrollWrap"),
					slideshowWrap = document.getElementById("slideshowWrap");
				// scrollWrap.addEventListener("click", function (event) {
					// console.log("scroll click");
				// });
				slideshowWrap.addEventListener("click", function (event) {
					console.log("slideshow click");
				});

				$("#scrollBtn").on("click", function () {
					console.log("scroller btn click");
				});
				// $("#slideshowBtn").on("click", function () {
					// $("#slideshowWrap").css("z-index", 1);
					// $("#slideshowBtn").css("z-index", 1);
					// $("#scrollWrap").css("z-index", TOP_INDEX);
				// });

				// $(document).on("click", "div", function (event) {
					// console.log("document click");
					// console.log(event.currentTarget);
				// });

				// $("div").on("click", function (event) {
					// console.log(event.target);
				// })
			});
		</script>
	</head>
	<body>
		<div id="mainPage">
			<div id="slideshowWrap">slideshow</div>
			<div id="scrollWrap">scroll
				<div id="scrollBtn"></div>	
			</div>
			<div id="slideshowBtn"></div>
		</div>
	</body>
</html>