js 如何阻止事件的冒泡

最新推荐文章于 2025-06-14 21:18:41 发布

原创最新推荐文章于 2025-06-14 21:18:41 发布 · 434 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了在IE和Firefox浏览器中通过设置event对象的cancelBubble属性和stopPropagation方法来阻止事件冒泡的技术细节。

阻止事件冒泡在IE下是通过设置event对象的cancelBubble属性为true实现的，而在firefox下是通过event对象的stopPropagetion方法实现的。

 e = window.event || e;
		if(document.all){
			e.cancelBubble = true;
		}else{		
		        e.stopPropagation();
		}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

泛泛之辈Leo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js阻止冒泡

02-26

js阻止冒泡 $(document).click(function(){ $(".scxl").children('ul').hide(); })

精选资源

JS阻止事件冒泡的方法详解

01-19

<%@ Page Language=C# AutoEventWireup=true CodeFile=Default5.aspx.csInherits=Default5%> <!DOCTYPE ...<... <head runat=server>...Porschev--

参与评论您还未登录，请先登录后发表或查看评论

js中阻止事件冒泡的方法

java 帝国

08-02

509

如果两个相互嵌套的js节点同时注册有相同的事件的话，便会同时出发两个事件，可是往往需要的是一个节点的事件触发，可以阻止事件冒泡，仅仅出发一个函数。例子如下： 1. 对于原生的JS function stopBubble(e){ if (e && e.stopPropagation) e.stopPropagation() else ...

JS中阻止冒泡事件的三种方法

热门推荐

小小前端

07-17

7万+

冒泡事件：比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。 <div class="box"> <button class="btn">按钮</button> </div> <script type="text/javascript"> $('.btn').click(functio...

JS阻止事件冒泡

itmyhome的专栏

01-16

9805

如下测试代码： #div{border: 1px solid red;width: 500px;} #p1,#p2{border: 1px solid red;} 我是外层DIV 我是P1 阻止事件冒泡我是P2 未阻止事件冒泡 JS阻止事件冒泡代码： function clickDiv(){ alert("我是外层DIV"); } function cl

javascript 怎么阻止事件冒泡

jiangjianqiang的专栏

07-22

445

1.停止事件冒泡 //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { //否则，我们需要使用IE的方式来取消事件冒泡

js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

10-26

此外，为了更好地理解和使用JavaScript事件，你可以参考这个在线查询工具：[javascript事件与功能说明大全](http://tools.jb51.net/table/javascript_event)，它汇总了JS常用的事件类型和函数功能，对开发者来说是个...

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开发中，事件冒泡是一种浏览器处理事件的机制。当我们点击页面上的某个元素时，事件不仅仅会在该元素上触发，还会传递到其父级元素，最后直至文档的根元素。在多数情况下，这种机制是...

JS如何阻止事件冒泡和如何阻止默认行为

吴冬雪的博客

04-18

456

【代码】JS如何阻止事件冒泡和如何阻止默认行为。

JS-阻止事件冒泡

chunchun的博客

11-12

1196

在 JavaScript 中，阻止事件冒泡（即阻止事件从子元素传播到父元素）可以通过方法来实现。这个方法可以防止事件继续向上层元素传播。

JavaScript基础-阻止事件冒泡

qq_51626500的博客

06-14

695

JavaScript基础-阻止事件冒泡

js阻止冒泡的方式-完整版

pengkai0113的博客

11-15

1470

js阻止冒泡的方式-完整版直接讲结论： 1.原生js 两种方式绑定事件 onclick 和 addEventListener 阻止冒泡的唯一方式为 var e = window.event || arguments.callee.caller.arguments[0]; e.stopPropagation(); 2.jq方式两种方式绑定事件 $().click(fn)...

详解javascript如何阻止冒泡事件及阻止默认事件

Sunny王维

09-13

1179

一、事件冒泡二、默认行为在说事件冒泡之前，我们先说说事件对象（Event） Event 1、在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息） 2、所有浏览器都支持Event对象，但支持方式不同 3、IE中的事件对象：window.event 一、事件冒泡什么是事件...

JS阻止事件冒泡和默认行为

Sunday97的博客

06-02

2453

1、首先对事件冒泡和默认行为以及要用到的事件对象event有个认识对事件冒泡的理解是当触发一个子元素的事件时，同时它的父元素的事件也会依次被触发。即事件从最低层元素依次向最外层元素触发默认事件（行为）指的是有些元素自身会有一些行为会自行被触发。例如< a>链接，提交按钮< input type = ‘submit’/> event代表事件的状态。例如触发event对象...

原生js阻止冒泡，兼容写法

fairyier

05-28

4652

js:var $item = document.getElementById('item'); $item.onclick = function (e) {//阻止冒泡 if (e) { e.stopPropagation(); e.preventDefault(); } else { ...

JS阻止事件冒泡的几种方式

每天进步一点

09-01

2775

JS阻止事件冒泡的几种方式事件委托将元素的绑定事件写起其父元素上，防止事件冒泡 example <div id="parent"> <div id="son"></div> </div>//将事件绑定在父元素上，不管子元素是不是动态生成的 //将第一种绑定事件写成第二种方式 $("#son").click(function(){ //todo });$("#parent")

阻止事件冒泡的方法

庚中

02-22

2万+

html结构: &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;div id="divOne" onclick="alert('我是最外层');"&gt;

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]。