pointerEvents-让事件穿透层

浏览:4899 发布日期:2013年08月15日分类:前端开发关键字: html5

参考资料:
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:

[code="java"]
<!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>[/code]

最佳答案

评论() 相关

后面还有条评论,

您需要登录后才可以评论登录 | 立即注册

执着〃々 08-02
thinkphp学习交流群
执着〃々 07-28
微信公众平台开发,小程序开发,php程序开发,模板下载,学习资料分...
iyouki 11-16
如何隐藏Linux中的Nginx服务器版本
iyouki 06-14
2017年移动应用开发的10个最佳JavaScript框架
iyouki 04-17
如何在Ubuntu 16.04上安装最新的MySQL

收藏

赞

mochong

积分:1704 等级:LV3

热点推荐

(追記) (追記ここまで)

最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。