js-事件穿透-1.1

    事件穿透，就是上面有一个元素，但我需要知道它挡住的下级的元素是什么，然后进行一些事件的处理。

 

有几种方法：

1、用css设置pointer-events。这个是屏蔽上面所有的事件

pointer-events: none;

但这个有问题，在ie上这个属性并不好用

 

2、js的elementFromPoint。这个是找到当前位置上的元素

this.style.pointerEvents = "none";      //将当前元素置为穿透
var ele = document.elementFromPoint(ev.clientX, ev.clientY);//获得穿透的元素
this.style.pointerEvents = "auto";      //恢复当前元素置为正常

这个的问题在于只能找到当前最上面的元素。而且由于用到了pointerEvents，不支持ie

 

 

【我是ie我招谁惹谁了(；´д｀)ゞ】

3、js的msElementsFromPoint

//获得鼠标按下位置上的元素列表
var hitTargets = document.msElementsFromPoint(ev.clientX, ev.clientY);

 

 

 

这些方法搭配起来更好哦~

if (window.navigator.userAgent.indexOf("MSIE") >= 1){//支持ie
    //获得鼠标按下位置上的元素列表
    var hitTargets = document.msElementsFromPoint(ev.clientX, ev.clientY);
    /*寻找需要的元素，然后手动触发函数*/
} else {
    this.style.pointerEvents = "none";      //将当前元素置为穿透
    var ele = document.elementFromPoint(ev.clientX, ev.clientY);//获得穿透的元素
    /*寻找需要的元素，然后手动触发函数*/
    this.style.pointerEvents = "auto";      //恢复当前元素置为正常
}