其实就是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);
}