html的事件穿透

阅读更多

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

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

下面是一个程序处理原理

页面有三个层次，页面，中间是iframe里面包含了内容，上面有一个遮罩层
目的是要二个层全部都主要注册的函数执行，这里的处理原理是，在第二层上动态添加遮罩层的处理函数，遮罩层事件穿透，直接让中间层的所有事件执行就可以了。