穿透层的鼠标事件

标题可能不是一读让人容易明白，上张图(转载的)

需要实现如下的效果，有一个浮动层，需要层级在它之下的一个元素也能照常响应相应的事件

一个100*100的元素，边框为1px solid #406c99，它有两个事件(鼠标移入、鼠标移出)：

οnmοuseοver="this.style.borderColor='#f00';"

οnmοuseοut="this.style.borderColor='#406c99';"

 

在不做特殊处理的情况下，它的事件将会是无法触发的，现在想让它正常触发，效果如下：

 

 

解决这样的问题有以下方案：

1、纯使用CSS的属性pointer-events，设置其为none (默认为auto)

优点：无需额外的代码

缺点：不支持IE(IE不支持此属性，IE9是否支持有待考评..)

2、捕捉事件获取鼠标的位置X、Y，然后触发层级较低元素的相应事件 (平时我们用调试工具选取页面中的元素，高亮显示的区域就是依据这个原理)

优点：兼容各浏览器

缺点：需要编写Javascript，效率并不高

这样获取有也有两种处理方法：

循环获取每一个元素的位置，然后对比鼠标的X、Y，效率低，不推荐；这里推荐使用elementFromPoint（浏览器都支持），直接传入X、Y，便可直接获取相应的DOM元素

 

比较折中的办法是，针对非IE的浏览器直接使用方案1，IE使用方案2进行优化。这种应用场景，可能会是一个新的产品上线了，需要引导用户如何去使用，会使用蒙板遮住整个页面，然后让某一元素可点击。

 

elementFromPoint的使用例子(移动鼠标时，如果那一点在某一元素的占位区域则添加3像素的红色边框，鼠标移开该元素时清除边框)

    
    
    

        test test test test test test test
    

    

        The current mouse position: 
    
    


    <br>        test test test test test test test test test test test test test test<br>    

    

        test test test test test test testtest test test test test test testtest test test test test test testtest test test test test test test
    

 

遍历元素，然后找到相应的元素示例(效率比较低的一种)

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
 
 
 
 
 
 
  
 
     
 
     
 
     
 
     
 
     
 
     
 
     
 
  
 
  
 
    Pass pointer events through 
    Try clicking
  
 

 

在非IE浏览器中，控制pointer-events来达到想要的效果的示例

 
  
  
  
  
  
  
  
 

 





开启pointer-events支持



 

转载于:https://www.cnblogs.com/susanws/p/5399302.html