取消冒泡事件

最新推荐文章于 2025-05-28 08:33:01 发布
最新推荐文章于 2025-05-28 08:33:01 发布 · 377 阅读 · 0
文章标签：

#xhtml #javascript #ViewUI

本文通过两个具体的HTML页面实例展示了如何使用JavaScript处理点击事件。详细介绍了事件冒泡机制，并通过代码示例说明了如何阻止事件冒泡。适用于希望深入了解HTML与JavaScript交互机制的前端开发者。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>

<script type="text/javascript">
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;
} else {
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>
yimeng501
关注
事件的冒泡与冒泡的取消方法
qq_45716607的博客
04-28 977
1事件冒泡 如果一个元素触发事情，那么其所有祖先元素都会依次执行触发该事件，这种机制称为冒泡 （好比气泡从水底下一直向上冒泡，像dom树一样，一直到根元素。） 2事件捕获 捕获与事件冒泡刚好相反 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
阻止冒泡事件 2020/11/24
weixin_50286102的博客
11-24 248
stopPropagation() 语法 event.stopPropagation(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati
jquery取消事件冒泡的三种方法
热门推荐
typ0520的专栏
04-11 3万+
1、通过返回false来取消默认的行为并阻止事件起泡。 jQuery 代码: $("form").bind( 　　"submit", 　　function() { 　　　　return false; 　　 } ); 2、通过使用 preventDefault() 方法只取消默认的行为。 jQuery 代码: $("form").bind(
JavaScript篇：JS事件冒泡：别让点击事件‘传染’！
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
05-28 1553
大家好，我是前端开发工程师小杨。今天我们来聊聊JavaScript中一个常见但又容易让人困惑的话题——事件冒泡。你有没有遇到过点击一个按钮，结果触发了父元素的点击事件？这就是事件冒泡在"作怪"。别担心，今天我就来教你怎么"治"它！
取消冒泡
Vivian_shuang的博客
07-13 499
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> .wrap{ width: 200px; height: 200px; background-color: palegreen; } style> head> body> div class=
js如何取消事件冒泡
10-26
这就涉及到了如何取消事件冒泡。 在JavaScript中，有两种主要的方式来阻止事件冒泡： 1. **`event.stopPropagation()`**：这是W3C标准的方法，适用于非IE浏览器。当你在事件处理函数中调用`stopPropagation()`时，...
jquery取消事件冒泡的三种方法(推荐)
10-22
jQuery提供了几种简单有效的方法来取消事件冒泡，这些方法能够帮助开发者更好地控制事件的传播行为。 1. 使用`return false`取消默认行为并阻止冒泡 在jQuery事件处理函数中直接返回`false`是一种最简单的方式来...
JavaScript事件冒泡与取消事件冒泡代码演示
04-16
本段代码演示了如何使用JavaScript取消HTML事件的冒泡，即当后代元素的事件被触发时，祖先元素的相同事件也会被触发。...关键词：事件冒泡、取消冒泡、单击事件。用途：学习如何使用JavaScript取消HTML事件的冒泡。
JS冒泡事件与事件捕获实例详解
11-26
本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考，具体如下： 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> [removed] [removed] = function(){ ...
js 取消冒泡事件
awe5566的专栏
09-24 980
function stopBubble(e){   //一般用在鼠标或键盘事件上   if(e && e.stopPropagation){   //W3C取消冒泡事件   e.stopPropagation();   }else{   //IE取消冒泡事件   window.event.cancelBubble = true;   }   };   1、cancelBu
取消事件冒泡
qq_35129986的博客
04-08 257
阻止事件冒泡：                        1.e.stopPropagation()方法   IE浏览器不可以                        2.cancelBbubble=true；属性 IE浏览器代码如下：              wapper.onclick=function(event){ console.log('wapper'); //取消冒泡...
11.①事件冒泡：取消冒泡event.cancelBubble=true或.sopImmediatePropagation()②事件绑定addEventListener(参数1，参2，参3）③事件传播
lazylYYY的博客
08-12 1064
一：事件冒泡： 设置点击事件，分别点击body、box、span，分别弹出‘我是body’、‘我是box’、‘我是span’ 但是我们发现点击span时一并弹出了‘我是body’、‘我是box’、这就是冒泡 1.冒泡指的是事件的向上传导， 当元素上的某个事件被触发时，其祖先元素上的相同事件也会同时被触发 2.冒泡与子元素所在位置无关，与结构有关（就算给子元素添加定位，移出父元素里面，还是会产生冒泡） 3.要取消事件的冒泡需要用到事件对象（两种方法） ...
js事件冒泡-基础
xvzhengyang的博客
12-01 217
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .one { background-color: red; height: 500px; } .two { background-color: #0000FF; height.
JS 取消冒泡和阻止默认事件
qq_45560350的博客
08-27 1309
事件对象 每个事件处理函数中，都可以有一个形参，系统会自动传递一个事件对象到函数中，这个对象的每个属性都代表事件被触发时的一些关键性数据 div.onclick = function(e){//形参e就是系统传递的事件对象 console.log(e); } 取消冒泡 1 .W3C标准 event.stopPropagation();但不支持IE9以下版本 document.onclick = function(){ console.log('aha'); } div.onclick = fun
取消冒泡事件方法
最文艺的程序媛
07-11 992
方法一： event.cancelBubble = true; //取消冒泡事件 方法二： event.stopPropagation(); //停止传播 也能取消冒泡事件
取消事件冒泡，取消默认行为
lililiaaa的博客
11-11 795
取消事件冒泡 标准浏览器：e.stopPropagation; IE浏览器:window.event.cancelBubble=true;（为了做兼容，如果在前面写明e=e||window.event;IE里面就是e.cancelBubble=true;） 阻止事件行为 阻止事件默认行为： e.preventDefault(); IE:e.returnValue = false ; 阻止鼠标右键的...
取消冒泡事件和阻止默认事件
vfjcgg的博客
03-15 215
取消冒泡事件和阻止默认事件 取消冒泡： W3C标准event.stopPropagation();但不支持IE9以下版本 IE独有event.cancelBubble=true; 封装取消冒泡的函数stopBubble(event) 阻止默认事件： 默认事件 —— 表单提交，a标签跳转，右键菜单等 1.return false;以对象属性的方式注册的事件才生效。 2.event.preventDe...
既然事件能够冒泡 怎么取消事件冒泡
weixin_34326179的博客
11-30 154
方法 Event 对象有个属性叫cacelBubble 默认值是false改成TRUE就取消当前事件冒泡 转载于:https://www.cnblogs.com/zhangao/p/10043934.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值