`

html的事件穿透

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

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

下面是一个程序处理原理

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

相关推荐

    对vue中的事件穿透与禁止穿透实例详解

    总结来说,Vue.js的事件修饰符和JavaScript的`event.stopPropagation()`提供了阻止事件冒泡的机制,而CSS的`pointer-events`属性则允许我们控制元素是否响应鼠标事件,从而避免事件穿透问题。在实际开发中,根据具体...

    解决移动端滚动穿透问题

    在移动Web开发中,"移动端滚动穿透问题"是一个常见的用户体验问题。当用户在页面上触发一个弹出层(如模态对话框、下拉菜单或加载遮罩层)时,通常希望页面主体部分在此期间不可滚动,以防止意外的滚动行为影响交互...

    d3.js制作股权穿透图

    制作股权穿透 投资结构图 使用方法 :该dome有两个文件 一个是html文件 另外一个是需要加载的json数据结构的文件,格式:{ "name": "马云", "tap":"节点", "children": [ { "name": "1中国平安人寿保险股份...

    d3+jQuery类似天眼查企查查的股权穿透图代码

    2. **jQuery**:jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个项目中,jQuery可能被用来处理用户交互,如鼠标拖动和滚轮缩放,提供更加流畅的用户体验。 3. **股权...

    关于vue组件事件属性穿透详解

    组件事件属性穿透 属性 $attrs包含从父组件传过来的属性,但不包含子组件中prop中的属性以及class和style,所以对于那些html元素原生属性,可以不用再子组件中声明,直接从父组件中传进来就好 // 子组件 <...

    Node.js-proxy基于electron开发的内网穿透工具

    Node.js基于Google V8引擎,以事件驱动、非阻塞I/O模型而著称,这使得它在处理大量并发连接时表现出高效性能。在本项目中,Node.js作为主要的后端开发语言,负责处理网络请求、数据传输和内网穿透的核心逻辑。 **...

    d3+jQuery类似天眼查企查查的股权穿透图代码.zip

    文件列表中的`index.html`是项目的主入口,它包含了HTML结构,用于展示股权穿透图。`gqct.css`则是样式表文件,定义了图的样式,如节点的颜色、形状、大小以及连线的粗细、颜色等。`jquery-3.3.1.min.js`是jQuery库...

    HTTP代理穿透方法

    GET http://example.com/index.html HTTP/1.1 Host: example.com ``` - 代理服务器接收到请求后,将请求转发给目标服务器,并将目标服务器的响应转发给客户端。 - **POST方法**:用于向服务器发送数据。客户端...

    解决IE6 中select 穿透 div 等层的问题

    在互联网的早期,Internet Explorer 6 (简称IE6) 是一款广泛应用的浏览器,但它的兼容性和渲染机制存在诸多问题,其中一个问题就是“select穿透div”的现象。这个问题在现代浏览器中通常不会出现,但在IE6中,`...

    网页填表_可穿透大部分框架.zip

    "网页填表_可穿透大部分框架.zip"这个压缩包提供了一个使用易语言开发的专业解决方案,旨在帮助用户高效、便捷地在网页上填写表单,即使面对复杂的网页框架也能应对自如。 易语言是一种中文编程语言,它的设计目标...

    解决DIV在IE下被下拉列表select穿透的问题(一)

    2. **JavaScript或jQuery解决方案**:当select元素被点击时,可以监听事件并在事件处理器中调整被穿透元素的样式。例如,使用jQuery: ```javascript $('select').on('focus', function() { $('#yourDiv')....

    vue解决弹出蒙层滑动穿透问题的方法

    当用户在弹出的全屏蒙层上滑动时,如果没有得到妥善处理,滑动事件会穿透蒙层,继续影响到蒙层下面的可滑动列表,导致用户体验不佳。本文通过具体的实现方法和技术细节,详细介绍了如何在Vue项目中有效解决这一问题...

    NAS 篇十一:小白上手教程,自建Frp内网穿透,实现外网访问nas设备_存储设备_什么值得买.html

    NAS 篇十一:小白上手教程,自建Frp内网穿透,实现外网访问nas设备_存储设备_什么值得买.html

    基于Netty框架的Java内网穿透与反向代理工具设计源码

    该项目是一款基于Netty框架开发的Java内网穿透与反向代理工具设计源码,总计包含117个文件,涵盖70个Java源文件、9个PNG图片文件、8个XML配置文件、4个Markdown文件、4个CRT证书文件、3个HTML文件以及少量其他类型...

    一种可以穿透还原卡和还原软件的代码.rar_穿透_穿透还原_还原_还原 穿透_还原软件

    在压缩包内的文件名称列表中,"一种可以穿透还原卡和还原软件的代码.htm"很可能是一个HTML文档,其中包含了详细的代码示例和解释,用于指导用户如何实现这一功能。而"www.pudn.com.txt"可能是从PUDN网站上下载资源时...

    解决DIV在IE下被下拉列表select穿透的问题(二)

    这个问题涉及到HTML中的`<div>`元素和`<select>`下拉列表之间的交互,具体表现为在Internet Explorer(特别是旧版本)中,`<select>`元素可能会穿透(z-index问题)或者遮盖住上方的`<div>`元素。 `<div>`元素是...

    解决微信小程序中的滚动穿透问题

    总之,解决微信小程序中的滚动穿透问题,关键在于阻止不必要的滚动事件,并根据实际场景灵活调整元素的定位和滚动行为。通过这种方式,可以显著提升用户体验,避免内容在不应滚动时产生滚动现象。对于遇到此类问题的...

    3d关系穿透图.7z

    这些节点可以是人、组织、事件或其他任何实体,而连接线则表示它们之间的关系,例如合作关系、上下级关系或通信联系。3D关系图则更进一步,它通过在三维空间中展示这些关系,为用户提供了更直观、更立体的视觉体验,...

Global site tag (gtag.js) - Google Analytics