html元素重叠 下面的元素仍然响应事件的解决

其实就是pointer-events和elementFromPoint


对于两个div,div a覆盖了div b,但是要让div b能够接收到鼠标的事件,有两种方法:

1.在firefox chrome等支持CSS3浏览器中,有个css属性叫pointer-events,设置div a的 pointer-events: none,

于是a上经过的所有鼠标事件都会过滤掉而不触发,相当于事件从a上直接渗透到了b上,于是b能响应事件。这时给a绑定了事件,也不会触发。

2.在IE中没有css3的属性,但是要拿到这个事件,可以通过给body绑定鼠标事件,然后在事件响应里通过

document.elementFromPoint(e.clientX,e.clientY)来获取当前鼠标所在位置的元素,虽然事件不是由你想要的那个元素触发的,但是通过这种方式能把元素和事件联系起来,但是效率上没有直接获得那么高而已。

			var obj = window;
			//var obj = document.body;
			var event = function(e){
				var targ = document.elementFromPoint(e.clientX,e.clientY);//targ 就是你需要响应事件的元素
			};
			var evt = "click";
			if(obj.addEventListener){
				obj.addEventListener(evt,event,false);
			}else if(obj.attachEvent){
				obj.attachEvent('on'+evt,event);
			}


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值