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

作者：马温柔时间：2023-09-10 08:57:36　

<％@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"％>

<!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 runat="server">
<title>Porschev---Jquery 事件冒泡</title>

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

</head>
<body>
<form id="form1" runat="server">
<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层！')">
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert('我是最里层！')">点击我</a>
</div>
</div>
</form>
</body>
</html>

比如上面这个页面，

分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;

他们都有各自的click事件，最里层a标签还有href属性。

运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层

---->然后再链接到百度.

这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。

事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。

如何来阻止?

1.event.stopPropagation();

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>

再点击“点击我”，会弹出：我是最里层，然后链接到百度

2.return false;

如果头部加入的是以下代码

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>

再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面

由此可以看出：

1.event.stopPropagation();

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

2.return false;

事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

还有一种有冒泡有关的：

3.event.preventDefault();

如果把它放在头部A标签的click事件中，点击“点击我”。

会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度

它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

来源：https://www.cnblogs.com/angel648/p/11409799.html

标签：JS,事件冒泡

投稿

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

猜你喜欢

利用python发送和接收邮件

SQL Server数据库连接中常见的错误分析

Perl哈希表用法解析

Python日志处理模块logging用法解析

javascript实现rgb颜色转换成16进制格式

Go语言基于HTTP的内存缓存服务的实现

matplotlib之属性组合包(cycler)的使用

python将txt等文件中的数据读为numpy数组的方法

Python3之乱码\\xe6\\x97\\xa0\\xe6\\xb3\\x95处理方式

delete from 表名与truncate table 表名区别

Python画图练习案例分享

Python基础之函数与控制语句

Python中的zipfile模块使用详解

Python计算矩阵的和积的实例详解

mysql installer community 8.0.12.0安装图文教程

天极产品设计流程

在VS Code上搭建Python开发环境的方法

MYSQL Binlog恢复误删数据库详解

Python免费验证码识别之ddddocr识别OCR自动库实现

Python中的数据可视化matplotlib与绘图库模块