html的事件穿透

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

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

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

你可能感兴趣的:(html)