javascript 同zindex的重叠div如何处理事件关系

flex_莫冲

浏览: 1075242 次
性别:
来自: 广州

最近访客更多访客>>

my_xinwen

MarshWinter

fuhsea

gzhif815

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

在一个页面中有3个独立的div，不存在嵌套层次关系。3个div互有重叠，如何控制监听事件的层次关系。比如div2盖住部分div1.点击重叠部分如何让div1监听到？
测试代码：

<html>
	<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	</script>
	<style>
		div{
			width:200px;
			height:200px;
			position: absolute;
		}
		#rec1{
			background-color: yellow;
			opacity:0.7;
			background-color: transparent none;
			z-index: 1;
		}
		#rec2{
			background-color: red;
			opacity:0.7;
			left:100px;
			z-index: 2;
		}
		#rec3{
			background-color: blue;
			opacity:0.7;
			left:200px;
			z-index: 3;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			var rec1 = document.getElementById("rec1");
			var rec2 = document.getElementById("rec2");
			var rec3 = document.getElementById("rec3");
			rec1.addEventListener("click",function(event){
				console.log(event);
				event.stopPropagation;
				event.preventDefault();

				console.log("rec1");
			},false);
			rec2.addEventListener("click",function(event){
				console.log(event);
				event.stopPropagation;
				event.preventDefault();
				console.log("rec2");
			},false);
			rec3.addEventListener("click",function(event){
				console.log(event);
				event.stopPropagation;
				event.preventDefault();

				console.log("rec3");
			},false);
			
		})
	</script>
	<body>
		<div id="rec1"></div>
		<div id="rec2"></div>
		<div id="rec3"></div>
	</body>
</html>

我的解决方案：
若监听的是rec1，则给rec1添加一个rec1Wrapper，z-index为最高，rec1Wrapper监听click事件并触发rec1的点击事件。

rec1Wrapper.addEventListener("click",function(event){
				$("#rec1").trigger("click");
			},false);

<div id="rec1Wrapper"></div>
#rec1Wrapper {
			z-index:99;
		}

分享到：

如何給html5的video的src地址不以明文方 ... | adobe creative suite extension builder扩 ...

2012-11-15 11:43
浏览 6480
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript 同zindex的重叠div如何处理事件关系

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript 同zindex的重叠div如何处理事件关系

评论

发表评论

相关推荐

使用BOOTSTRAP创建没有遮罩的可移动dialog

富文本编辑器推荐

一些比较特别的js库和框架

Javascript的变量与delete操作符

uploadifive上傳插件的使用

json schema validate

来自yahoo的web优化规则（YSLOW的23条军规）

<a>的href中添加js函数的写法

使用backbonejs的router功能

初次seajs使用

Javascript:history.go()和history.back()的用法和区别

JAVASCRIPT常用函数集合

JS判断一个数组中是否有重复值的三种方法

多DOM操作的性能优化

SafariJSRef safary开发指南

js获取屏幕可视区域

backbone 的delegateEvent用法

post的数据参数内容包含&如何如何处理

jquery easyui 操作总结

javascript浮点运算偏差的成因及解决方法

最近访客更多访客>>