参考资料:
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>
分享到:
相关推荐
当pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
CSS pointer-events Pointer-events原本来源于SVG,目前在很多浏览器中已经得到体现。不过,要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events,基本上可以将它设置为auto,这是正常的行为,而...
gatsby-plugin-pointer-events 一个Gatsby插件,用于添加安装纱yarn add gatsby-plugin-pointer-events NPM npm install gatsby-plugin-pointer-events 如何使用将插件添加到您的gatsby-config.js 。 // gatsby-...
CallBack_函式指標(function pointer)-用途_Good
pointer-events 属性值有: /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: ...
现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下: 复制代码代码如下:<!DOCTYPE html><html><head>&...
而本文要说的pointer-events的风格更像JavaScript,它能够: 1.阻止用户的点击动作产生任何效果.阻止缺省鼠标指针的显示3.阻止CSS里的hover和active状态的变化触发事件4.阻止JavaScript点击动作触发的事件 一个CSS...
dangling-pointer-rampage-master.rar
详解函数指针和指针函数的区别和使用,对深刻理解二者非常有用.
pointer_events_polyfill, Polyfill提供对指针事件的支持 指针事件 Polyfill指针事件Polyfill是一个简短的javascript库,它添加了对样式属性的支持: 无"。没有这里功能的浏览器( 即 MS IE ) ) 。安装包括任何合理的...
how to use pointer better,how to use pointer better,how to use pointer better,how to use pointer better.
桌面冻结涂鸦,可以画线、画圈,写字。快捷键F9。安全无广告,亲测可用。。。。。。。。。。。。。。。。。。
一组基于PointerEvents的直观手势_JavaScript_下载.zip
现在,利用css的pointer-events属性即可做到。 CSS pointer-events Pointer-events原本来源于SVG,目前在很多浏览器中已经得到体现。不过,要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events,...
主要介绍了CSS pointer-events属性的使用,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
顾名思义,pointer-events 是一个用于 HTML 指针事件的属性。 pointer-events 可以禁用 HTML 元素的 hover/focus/active 等动态效果。 默认值为 auto,语法: 复制代码代码如下: pointer-events: auto | none | ...
强化学习实战