JS阻止事件冒泡

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

#XHTML #HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS中的事件冒泡</title>
<script type="text/javascript"><!--
function ClickTr()
{
alert("TR");
}
function ClickTd()
{
alert("TD");
//如果不加下面的代码点击先会弹出TD然后弹出TR，原因是HTML是对象结构当点击AAA的时候（执行）,会冒泡到TR-->table-->body->document->window,当用event.cancelBubble=true的时候就说明阻止该冒泡行为
event.cancelBubble=true;
}

// --></script>
</head>
<body>
<div style="background-color:Azure;" style="background-color:Azure;">目的当点击BBB的时候弹出TR,当点击AAA的时候弹出TD</div>
<table>
<tr onclick="ClickTr();">
<td onclick="ClickTd();">AAA</td>
<td>BBB</td>
</tr>
</table>
</body>
</html>
JS 事件冒泡 示例代码
10-29
JS 事件冒泡 示例代码，大家可以参考下。
JS阻止事件冒泡的方法详解
01-19
<%@ Page Language=C# AutoEventWireup=true CodeFile=Default5.aspx.csInherits=Default5%> <!DOCTYPE ...<... <head runat=server>...Porschev--
JS事件冒泡代码
刀刀宅
05-18 596
JS事件冒泡
javascript冒泡事件代码
hh_riy_xj的博客
09-02 401
关于JavaScript事件冒泡的代码
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
10-26
在处理事件时，有时我们需要阻止默认行为或者防止事件冒泡，以确保事件按照我们的预期执行。本篇将详细介绍`event.preventDefault()`和`event.stopPropagation()`的用法，并提供示例。 1. **阻止默认事件**： 当一...
javascript阻止事件冒泡的一种方法
03-25
`index.html`通常是网页的结构，而`min.js`可能包含了压缩过的JavaScript代码，用于演示阻止事件冒泡的实现。通过查看这两个文件，我们可以更深入地理解阻止事件冒泡的实践应用。 总结一下，阻止事件冒泡是...
兼容各大浏览器的JavaScript阻止事件冒泡代码
10-23
// 阻止冒泡事件 // 取消事件冒泡 var e = arguments.callee.caller.arguments[0] || event; // 若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容 if(e && e.stopPropagation){ // Mozilla和...
JS阻止事件冒泡行为和闭包的方法
10-22
### JS阻止事件冒泡行为 在Web开发中，事件冒泡是一种浏览器处理事件的机制。当我们点击页面上的某个元素时，事件不仅仅会在该元素上触发，还会传递到其父级元素，最后直至文档的根元素。在多数情况下，这种机制是...
解决点击事件冒泡
11-02
解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码
jq代码学习10--事件冒泡
vvvbird的专栏
10-03 448
1.停止冒泡时间<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
事件的冒泡
weixin_44154094的博客
01-23 194
事件的冒泡1.定义（这个别跳过）2.代码（定义理解的好此处代码可以忽略） 1.定义（这个别跳过） 事件的冒泡（Bubble） * - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 * - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡 2.代码（定义理解的好此处代码可以忽略） <!DOCTYPE html> <html> <head> <meta charse
JS事件冒泡实例
u010025127的博客
06-25 798
近段时间，在开发中遇到需要自定义选择下拉框，在自己尝试实现下拉选择框时，就遇到今天要探讨的js冒泡问题。于是，针对这个问题，本文结合选择下拉框的实现为例，来探讨一下。 首先看一下什么是事件冒泡 事件冒泡 ：dom树中的一个元素接收到事件的时候，会将事件传递给他的父级元素，直至window。先来看一下简单的例子： <div id="div1"> 父节点 <div id="div2"> ...
事件冒泡，事件委托，事件冒泡
weixin_53781355的博客
02-24 282
1.事件流 示例代码： <style> #wrap,#inner,#textSpan{ margin: 5px; padding: 5px; box-sizing: border-box; cursor: default; } #wrapDiv{ width: 300px; height: 300px; border: indianred 3px so
js中事件2-事件冒泡及事件委托
json博客
01-29 355
一、事件冒泡 要了解事件冒泡，先理解下事件处理的三个周期。 DOM处理周期：三个阶段都存在 第一阶段：事件捕获；这步在后台完成，用户无法操作。例如当点击元素div时，实际上点击顺序是：document-html-body-div 第二阶段：目标触发； 第三阶段：事件冒泡；这是用户可以操作的，默认是冒泡。当触发目标后，事件的传递方式。例如当点击元素div时，实际上点击顺序是：div-body-htm...
解释事件冒泡和事件捕获的原理，并说明它们之间的区别与使用场景
weixin_53291256的博客
07-13 6333
事件冒泡和事件捕获是什么？能做什么？看完这篇你就明白了
js基础（二）：事件（事件冒泡、事件捕获、事件对象、事件委托）
ThisEqualThis的博客
11-11 3172
事件 javascript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。 事件流 事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。 事件冒泡 IE的事件流叫做事件冒泡（event bubbling）,即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，...
Javascript的事件冒泡
热门推荐
Night_nigh的博客
03-27 1万+
今天呢，来讲一个知识点，叫做Javascript的事件冒泡（Bubble），什么叫事件冒泡，就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡，光说不行，还得先演示一下。 首先，我们先创建一个“HTML”文档，在头部部分写上一个内联样式“style”，给“body”一个背景颜色，在“body”部分写上两个“div”给他们写上一个“ID”名（取名随意） 再创建两个不同大小的方块也给他们一个背景颜色（这里大小 颜色随意），就像这样： 然后就开始“...
js阻止事件冒泡
最新发布
06-15
### JavaScript 阻止事件冒泡的解决方案 在 JavaScript 中，阻止事件冒泡可以通过调用事件对象的 `stopPropagation()` 方法实现。此方法可以有效防止事件从当前元素传播到其祖先元素[^1]。 以下是一个具体的示例代码： ```javascript // 示例代码：阻止事件冒泡 document.getElementById('child').addEventListener('click', function(event) { event.stopPropagation(); // 阻止事件冒泡 console.log("Child button clicked, but event won't bubble up."); }); document.getElementById('parent').addEventListener('click', function() { console.log("Parent div clicked"); }); ``` 在这个例子中，当点击子元素时，`stopPropagation()` 方法被调用，因此父元素的点击事件不会触发[^1]。 此外，在处理列表项时，也可以通过类似的方式阻止事件冒泡。例如，为一个列表 `<ul>` 添加事件监听器，并在点击 `<li>` 元素时阻止事件传播[^4]： ```javascript // 示例代码：阻止事件冒泡在列表项中的应用 document.getElementById('list').addEventListener('click', function(event) { var target = event.target; if (target.tagName.toLowerCase() === 'li') { console.log('Item clicked:', target.textContent); event.stopPropagation(); // 阻止事件冒泡 } }); ``` 这段代码展示了如何在列表项点击时，避免事件传播到父级 `<ul>` 元素[^4]。 ### 注意事项 需要注意的是，事件冒泡是事件流的一部分，而事件流包括两个阶段：**捕获阶段**和**冒泡阶段**。通常情况下，事件默认会经历冒泡阶段，但可以通过调用 `stopPropagation()` 来中断这一过程[^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值