js-事件穿透-1.1

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caishu1995/article/details/86505167

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

有几种方法:

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";      //恢复当前元素置为正常
}

猜你喜欢

转载自blog.csdn.net/caishu1995/article/details/86505167