事件冒泡怎么解决，与ie的兼容又怎么解决

最新推荐文章于 2022-05-19 09:45:49 发布
最新推荐文章于 2022-05-19 09:45:49 发布
阅读量777 收藏
点赞数 1
分类专栏： JSDOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37805832/article/details/108688446
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background: red;
        }
        .son{
            width: 150px;
            height: 150px;
            background: blue;
        }
    </style>
</head>
<body>
<div class="father" id="father">
    <div class="son" id="son"></div>
</div>
<script type="text/javascript">
 // 1.拿到需要操作的元素
    var oFDiv = document.getElementById("father");
    var oSDiv = document.getElementById("son");
     oFDiv.onclick = function () {
        console.log("father");
    }
    oSDiv.onclick=function(event)
    {
    	event=event||window.event;
    	if(event.cancelBubble)
    	{
    		event.cancelBubble=true;
    	}
    	  // 注意点: stopPropagation方法只支持高级浏览器
        // event.stopPropagation();
        // event.cancelBubble = true; // 低级浏览器
    	else
    	{
    		event.stopPropagation();
    	}
    	console.log("son");
    }
   </script>
</body>
</html>
贵哥的编程之路(热爱分享)
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS事件冒泡浏览器兼容
03-29
NULL 博文链接：https://zlotus.iteye.com/blog/1094308
阻止事件冒泡和浏览器默认行为，考虑兼容性
Tempta的博客
08-16 635
//事件冒泡function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 win
事件冒泡的解决方案
fb_01的专栏
04-18 2678
1、事件冒泡：        在一个对象上触发某类事件（例如单击事件onclick事件），若果此对象定义了此事件的处理程序，那么就会调用这个处理程序；但是如果没有定义此事件的处理程序或者事件返回true，那么这个事件就会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它达到了对象层次的最顶层，即document对象（有的浏览器是window）。
解决JS事件冒泡兼容性问题
weixin_30672295的博客
11-21 170
所谓的事件冒泡是指事件的响应会像水泡一样上升至最顶级对象。有些情况下事件冒泡是人为设计的，但是大多数情况下，冒泡是需要禁止的。 /** * 解决事件冒泡兼容性问题 * @param {Object} event：W3C下的事件对象 */ function stopBubble(event) { if(window.event) { // IE浏览器 ...
阻止事件冒泡兼容处理 兼容ie678
水机.Threeki
09-11 375
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;style&gt; .parent{ border: #ccc solid 1px; width: 100px; height: 100
兼容各大浏览器的JavaScript阻止事件冒泡代码
10-23
本文给大家分享的是一段兼容各大浏览器的JavaScript阻止事件冒泡代码，虽然因为时间问题没有深入研究，但是还是相当不错的，这里推荐给大家
JavaScript 事件冒泡简介及应用
12-10
JavaScript 事件冒泡是Web开发中的一个重要概念，它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素，直到到达文档的根节点（通常是document...
javascript mouseover、mouseout停止事件冒泡的解决方案
12-01
然而，在处理这些事件时，一个常见的问题是如何有效地阻止事件冒泡，以便仅在特定条件下执行相关操作，尤其是在需要兼容不同浏览器的时候。事件冒泡是指事件从最深的节点开始，逐级向上层节点传播事件，直到到达文档...
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
10-28
而在IE8中，事件处理顺序会是`div -> body -> document`，因为IE不会将冒泡事件传播到`window`级别。 这段描述中还提到了事件处理函数的两种模型：捕获型事件和冒泡型事件。Firefox支持这两种模型，但默认情况下，...
IE兼容，盒模型，默认/冒泡事件
qq_44818085的博客
11-26 177
1.IE 盒模型与标准盒模型 盒模型的组成，由里向外分别是 content，padding，border，margin 标准盒模型：内容大小就是content的大小 ( (margin + padding + border) * 2 + width ) IE盒模型： 内容大小是 content，padding，border总的大小 ( margin * 2 + width ) 通过设置 box-sizing: content-box(W3C) / border-box(IE) 就可以达
事件冒泡的概念及阻止事件冒泡-兼容性写法
小傻子的博客
11-11 1435
36事件冒泡和捕获-兼容性写法 一、什么是事件冒泡 一条鱼往上吐泡泡，这个泡泡就是事件，一直往上冒的过程中去把它经过的所有元素，只要这个元素身上有相同事件，就会去执行该元素的该事件，没有相同事件就不会去执行 二、冒泡特点 1、冒泡看的是代码层级，从里往外冒泡 2、拥有相同类型事件的元素才会被执行 3.不同事件就是不同泡泡 三、阻止事件冒泡 并不是所有事件都需要事件冒泡，我们需要让事件执行完自身的该...
js阻止冒泡事件和默认事件的方法兼容性写法
mayue24的博客
06-28 529
HTML代码：&lt;div id="swap"&gt; &lt;div id="box"&gt; &lt;a href="http://www.baidu.com" id="btn"&gt;点我&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; js代码： var swap=do
js 点击事件 阻止冒泡
Monkey
04-15 1394
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>阻止冒泡</title> <meta name="keywords" content="阻止冒泡" /> <meta name="descriptio...
IE8仅支持冒泡阶段的attachEvent
12-03 457
注意: attachEvent仅支持IE（edge也不支持），在IE8中，先绑定的后执行，但在IE9以及后续版本中，先绑定的先执行。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;js测试&lt;/title&gt; &lt
获取事件冒泡路径，兼容 IE11，Edge，Chrome，Firefox，Safari
liuhao9999的博客
05-19 287
/** * 获取事件冒泡路径，兼容 IE11，Edge，Chrome，Firefox，Safari * 目前使用的地方：JVxeTable Span模式 */ export function getEventPath(event) { let target = event.target let path = (event.composedPath && event.composedPath()) || event.path if (path != null) { .
IE与兼容W3C标准浏览器事件冒泡的顺序
lee576的专栏
07-15 1852
先说说一向自行其事的IE吧，其没有遵守W3C标准，总是按照自己的那套规则来，它的事件冒泡的顺序为先执行目标元素的事件，然后，事件向外传播到每个祖先元素.遵守W3C DOM2 标准的浏览器以firefox为例，先执行最外层的祖先元素，然后事件相应地由外向内传播，直至抵达目标元素.我们在编写js脚本时一定要注意到这点差别!
事件冒泡（IE事件流），事件捕获和DOM事件流
阿超的博客
04-08 4410
1 前言《JS高级程序设计》第13章在讲述事件冒泡和事件捕获时没有提供实例，我想这部分内容如果有实例，会有助于读者理解。2 事件冒泡和事件不会首先看一张图：描述了事件冒泡和事件捕获的流程。 首先声明，不同浏览器以及规范在事件流是否会触发顶层元素（document,html,body)有细微的差别，非常混乱。IE事件流，即事件冒泡，是从达到触发条件的最小标签向上冒泡。比如上图中的img，即使绑定了
js阻止事件冒泡的方法（兼容IE及其他浏览器）
布先生
03-15 4396
原文地址：https://www.cnblogs.com/moqing/p/5590216.html function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e &amp;&amp; e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropag...
js处理事件冒泡（兼容写法）
weixin_30763397的博客
02-18 311
event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } 转载于:https://www.cnblogs.com/EternalZH/p/10395045.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贵哥的编程之路(热爱分享)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值