div包裹一个flash后，这个div无法绑定click事件了，绑定mouseover事件是正常的

最新推荐文章于 2021-11-16 15:18:43 发布
原创 最新推荐文章于 2021-11-16 15:18:43 发布 · 279 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #background #flash #click #ViewUI

本文探讨了在div包裹Flash元素后导致click事件无法绑定的问题，并提供了解决方案，即通过添加一层带有透明背景的div来恢复click事件的功能。
div包裹一个flash后，这个div无法绑定click事件了，绑定mouseover事件是正常的。我的解决方法是另外加一层div2，覆盖在这个有flash的div上方，这个div2在chrome绑定click事件正常了，在ie下仍旧不行，最后，我给div2加上白色，并加上透明度，background-color: rgb(255, 255, 255);filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;算是在一定程度上解决了这个问题。
测试地址：
http://images.sohu.com/bill/s2011/gates/html/Gillette.htm


并且，在ie6下，让包裹flash的div的z-index=-1;则flash不显示了，好bug啊。
xiaomogu13
关注
JQuery中绑定事件（bind()）和移除事件（unbind()）
10-24
在jQuery中，通过bind()可以为选定的元素添加一个或多个事件处理函数。它的基本语法是： ```javascript $(selector).bind(eventType, [data], handler); ``` 这里的selector是选取元素的选择器，eventType指的是要...
jQuery事件绑定与解除绑定实现方法
10-24
值得注意的是，`bind`方法可以同时绑定多种事件，只需传入一个包含多个事件类型的空间分隔字符串，例如：`bind('click mouseover', function() {...})`。 另一方面，`unbind`方法用于移除已绑定的事件处理器。它...
flash与div层级问题
weixin_30437337的博客
09-12 190
今天在工作中用到flash，flash工程师没有给接口调用其点击事件， 在js中无法绑定flash的点击事件，应该是flash默认禁掉了DOM的点击， 自己想在flash包裹层上添加一个兄弟节点div#btn来触发点击事件。 布局如下。 HTML： <div class="giftBtn"> <div id="flash_wrap"></div&gt...
《JavaScript前端开发案例教程》------第8章事件课后练习
homoiotheymy的博客
07-14 4034
一、填空题 1. 事件处理程序 2. 事件监听 二、判断题 1. 错。 2. 错。 3. 对。 三、选择题 1. C 2. B 3. C 四、编程题 1. <style> #toolbar {border: 1px solid #ff5c00; border-radius: 8px;width: 60px;position: absolute;height: 30px;line-height: 30px; top: 0; left: 0;display: none;backg
vue绑定div鼠标移入移出事件
qq_43894292的博客
11-16 7373
1.两种绑定方式 <div v-on:mouseover="handleOver($event)" v-on:mouseout="handleOut($event)"></div> <div @mouseover="mouseOver" @mouseleave="mouseLeave"></div> handleOver (e) { console.log('移入：', e); e.currentTarget.className = "
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
10-17
示例代码中展示了如何使用`.bind()`方法绑定`mouseover`和`click`事件到ID为`div1`的div元素上，并展示了如何使用`.unbind()`方法移除`mouseover`事件。这个例子展示了如何在事件触发后，动态地解除特定事件的绑定。...
JQuery入门——用bind方法绑定事件处理函数应用介绍
10-27
当页面加载完成（`$(function(){...})`，即jQuery的文档就绪事件）后，`bind()`方法被用来绑定一个点击事件处理函数到按钮上。 ```javascript $("#btnBind").bind("click ", function() { intI++; $(".clsShow")....
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
10-27
`one()`方法允许开发者为指定的元素设置一个事件处理器，但这个处理器只会在事件发生一次后自动解除绑定。这在某些场景下非常有用，例如一次性提示、初始化动作或避免重复执行某段代码。其基本调用语法如下： ```...
vue单个元素绑定多个事件 例如点击绑定多个事件方法
脑瓜疼儿的博客
01-21 1万+
比如 @click=“one();two()” 注意: 方法名后加() =&gt; 调用方法 多个方法用;隔开
JS事件详解(二) —— 事件处理程序（事件的绑定）
bingo_wangbingxin的博客
01-22 3820
事件绑定方法 方法一：直接在HTML标签中绑定 在html标签中添加“on”+事件名称的属性来绑定事件 事件处理程序可直接写在属性值当中 div class="demo" onclick="console.log(this)">div> // this指向的是当前DOM对象 这种事件处理程序的作用域很特别，可以像局部变量一样直接访问document及元素本身的成员，示例：
JavaScript中mouseover和mouseout多次触发解决办法
热门推荐
hsd2012的专栏
06-12 2万+
mouseover和mouseout多次触发原理分析；mouseenter与mouseleave实现分析；判断两个元素是否存在包含关系；compareDocumentPosition介绍；获取兼容性性的relatedTarget；改进mouseover和mouseout使其具备mouseenter与mouseleave效果效果；对改写的代码进行封装等。
Javascript事件绑定的几种方式（百度电话面试题）
01-07 8039
 Javascript的事件绑定主要有四种方法（一下在IE中运行正常，但不保证其他浏览器）：  [注：onXXX为某一事件，fun为某一function，domId为某一DOM对象id，event类型见后边附录。]1、在DOM中，直接用onXXX="fun();"进行绑定 2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定3、用 DOM对象.attachE
js对mouseover和mouseout事件处理
tfnco的专栏
11-21 4502
mouseover和mouseout事件是SPA经常用到的两个事件，很多时候我们期望通过捕获这两个事件来操作目标DOM或者源DOM，但是当我们添加了事件监听，捕获事件句柄以后通过this方法或者event.target（event.srcElement）方式得到的目标DOM或者源DOM 并不是我们所期望的。尤其是当涉及到源DOM或者目标DOM内含有多级子元素时，这两个事件的响应变得更加让人迷惑。
JavaScriptDOM练习之为同一个元素绑定多个不同的事件并指向同一个事件处理函数
星空nwk的博客
10-07 1045
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> button id="btn">按钮button> script src="../common.js">script> script> my$("btn").addEventListener("click", f1)
jQuery 绑定3种鼠标事件 click(鼠标点击)，mouseover(鼠标移入)，mouseout(鼠标移开)
旭东怪的博客
09-01 6290
1 click() 说明：鼠标点击时触发click事件。 语法： $(selector).click(function1); 实例： 文本框绑定click事件。 $(function(){ $("input[type=text]").each(function(){ $(this).click(function(){ alert("text click"); }); }); }); 2 mouseover() 说明：当
vue3中如何获取一个dom元素的绑定的事件和对应的事件处理函数
最新发布
06-12
### Vue 3 中获取 DOM 元素并绑定事件及其处理函数的方法 在 Vue 3 中，可以通过 `ref` 和 `$refs` 来获取 DOM 元素，并结合事件绑定机制来实现事件处理。以下是一个完整的示例，展示如何通过 `ref` 获取 DOM 元素并绑定事件以及处理事件。 #### 示例代码 ```vue <template> <div> <button @click="handleButtonClick">点击我</button> <div ref="myDiv" @mouseover="handleMouseOver"> 鼠标悬停在这个区域上。 </div> </div> </template> <script setup> import { ref, onMounted } from 'vue'; // 定义 ref 来引用 DOM 元素 const myDiv = ref(null); // 处理按钮点击事件 function handleButtonClick() { if (myDiv.value) { console.log('DOM 元素的宽度:', myDiv.value.offsetWidth); // 访问 DOM 属性[^1] console.log('DOM 元素的位置:', myDiv.value.getBoundingClientRect()); // 获取位置信息[^1] } } // 处理鼠标悬停事件 function handleMouseOver(event) { if (myDiv.value) { console.log('鼠标悬停在元素上:', event.target); console.log('相对于视口的位置:', myDiv.value.getBoundingClientRect()); // 获取位置信息 } } // 在组件挂载后访问 DOM 元素 onMounted(() => { if (myDiv.value) { console.log('组件挂载后访问 DOM 元素:', myDiv.value); } }); </script> ``` #### 解释 1. **使用 `ref` 获取 DOM 元素**：在模板中为需要操作的 DOM 元素添加 `ref` 属性，例如 `<div ref="myDiv">`。然后在脚本部分通过 `const myDiv = ref(null)` 声明一个响应式变量，并通过 `myDiv.value` 访问该 DOM 元素[^3]。 2. **绑定事件**：通过 Vue 的事件绑定语法（如 `@click` 或 `v-on:click`）将事件绑定到 DOM 元素上。事件处理函数可以在脚本部分定义，例如 `handleButtonClick` 和 `handleMouseOver`[^4]。 3. **事件处理函数**：在事件处理函数中，可以通过 `this.$refs.refName` 或 `ref.value` 来访问 DOM 元素，并对其进行操作。例如，获取其大小、位置或调用方法[^2]。 4. **生命周期钩子**：如果需要在组件挂载后访问 DOM 元素，可以使用 `onMounted` 生命周期钩子。确保 DOM 已经渲染完成后再进行操作。 #### 注意事项 - 如果需要在数据更新后访问 DOM 元素，可以使用 `this.$nextTick()` 方法，确保 DOM 更新完成后再执行回调函数。 - 使用 `ref` 时，确保在模板中正确设置 `ref` 属性，并在脚本部分通过 `ref.value` 访问对应的 DOM 元素。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值