pointerEvents-让事件穿透层
参考资料：
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：
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>