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

最后

以上就是忐忑绿草为你收集整理的js-事件穿透-1.1的全部内容，希望文章能够帮你解决js-事件穿透-1.1所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。