html的事件穿透

65 阅读 0 评论 43 点赞

我是靠谱客的博主怕孤独小懒猪，最近开发中收集的这篇文章主要介绍html的事件穿透，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

近一段时间看dojo操作界面上的层，现在又一个需求，就是在iframe上面覆盖了一个层，二个不是包含关系，是二个同级对象，现在是添加的层里面拦截了iframe内部的所有的事件，事件不执行。为了能够执行下面的iframe的事件，需要将事件穿透过层，让iframe也可以捕获。这个不同的浏览器处理方式还是有差异的。

1.非IE，在标准的css中有一个[b]pointer-events[/b]这个属性，默认设置为auto，将其设置为none，就可以完成事件的穿透功能。这个功能非常简单，不需要修改代码，但是ie不支持。
2.针对于ie，需要自己编写代码，根据事件发生的x，y，取得xy下的所有的组件，然后调用其相应的方法。这种方式需要自己编写代码，运行效率不高。

下面是一个程序处理原理
[img]http://dl.iteye.com/upload/picture/pic/124513/5d302d2e-1eaf-3667-a8cc-21c2f75f8df7.jpg[/img]
页面有三个层次，页面，中间是iframe里面包含了内容，上面有一个遮罩层
目的是要二个层全部都主要注册的函数执行，这里的处理原理是，在第二层上动态添加遮罩层的处理函数，遮罩层事件穿透，直接让中间层的所有事件执行就可以了。