JS阻止冒泡和取消默认行为

最新推荐文章于 2023-02-20 16:44:35 发布
最新推荐文章于 2023-02-20 16:44:35 发布
阅读量340 收藏 2
点赞数 2
分类专栏： JS 文章标签： 默认事件 默认行为 冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifanzhuli/article/details/96461767
版权

js中冒泡和捕获是事件的两种行为

使用 stopPropagation() 起到阻止捕获和冒泡阶段中当前事件的进一步传播。
使用 preventDefault() 可以取消默认事件。浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转，form表单里点击提交按钮时网页会产生提交行为并刷新网页等等。

我们可以通过js取消或更改这些默认事件。

防止冒泡和捕获

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。

如：

	<body>
    <div class
了解本专栏 订阅专栏 解锁全文 超级会员免费看
爱睡的虫虫
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
js取消默认行为和阻止事件传播的方式
猿码互联
06-03 562
当一个元素上触发某个事件时，事件会从该元素开始沿着 DOM 树向上传播，直到到达根元素。通过阻止事件传播，可以阻止事件继续向上传播，即停止事件冒泡。默认情况下，当用户触发某些事件时（如点击链接、提交表单等），浏览器会执行默认的操作。通过取消默认行为，可以阻止浏览器执行这些默认操作。需要注意的是，还有一种方法可以同时取消默认行为和阻止事件传播，即调用。在上述示例中，当点击链接时，既取消了默认行为，也阻止了事件传播。在上述示例中，当点击内部元素时，事件处理函数会调用。在上述示例中，我们通过调用。
Js阻止事件冒泡与阻止默认事件
weixin_44562686的博客
12-15 2180
1、event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 提示：请使用 event.isPropagationStopped()方法来检查指定的事件上是否调用了该方法。 2、event.preventDefault()方法 取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联
阻止事件默认行为（取消事件默认行为）
大脸小覃的博客
10-09 308
阻止事件默认行为（取消事件默认行为）：event.preventDefault();ie678以下不兼容 ie678用:event.returnValue = false; 方法 一： ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; 方法 二： return false;–只能在句柄式绑定事件中 ...
js中preventDefault、stopPropagation、return false三者之间
weixin_33924312的博客
07-17 264
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript-----阻止事件默认行为和事件冒泡
weixin_45904557的博客
06-10 2248
目录一.阻止事件默认行为1.preventDefault();方法2.低版本浏览器 returnValue属性3.return false;e.stopPropagation();e.cancelBubble = true; 阻止事件冒泡的兼容性解决方案阻止事件默认行为的三种方法: 以下是没有阻止冒泡行为的示例,会从最具体的元素向上床底: //stop 停止 Propagation传播//ie cancel取消 bubble泡泡 阻止冒泡排序之后:...
DOM系列之阻止冒泡和取消默认行为
老__L的博客
03-06 1541
阻止冒泡和取消默认行为
JS阻止事件冒泡和默认行为
Sunday97的博客
06-02 2341
1、首先对事件冒泡和默认行为以及要用到的事件对象event有个认识 对事件冒泡的理解是当触发一个子元素的事件时，同时它的父元素的事件也会依次被触发。即事件从最低层元素依次向最外层元素触发 默认事件（行为）指的是有些元素自身会有一些行为会自行被触发。例如< a>链接，提交按钮< input type = ‘submit’/> event代表事件的状态。例如触发event对象...
js阻止默认浏览器行为与冒泡行为的实现代码
11-26
在JavaScript中，阻止浏览器默认行为和停止事件冒泡是两种重要的事件处理机制，它们主要用于定制交互体验和解决浏览器之间的兼容性问题。以下是关于这两个概念的详细说明： **阻止浏览器默认行为**： 当用户触发...
浅谈javascript事件取消和阻止冒泡
10-24
在处理事件时，有时我们需要阻止事件的默认行为或者避免事件的冒泡，这就是所谓的事件取消和阻止冒泡。 首先，让我们来理解什么是事件取消。事件取消的目标是防止浏览器执行与特定事件相关的默认行为。例如，当用户...
JS传播事件、取消事件默认行为、阻止事件传播详解
10-19
JavaScript中的事件处理是Web开发...总结来说，理解JavaScript中的事件传播、取消默认行为和阻止事件传播对于编写高效且可控的交互式网页至关重要。熟练掌握这些技巧可以帮助开发者创建出更加灵活和用户友好的Web应用。
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
12-12
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e....
jQuery中事件的冒泡和默认行为
01-20
事件冒泡和默认行为是理解JavaScript事件模型的关键概念。本文将详细探讨这两个概念以及如何在jQuery中控制它们。 **事件的冒泡** 事件冒泡是指当一个事件（如点击）在DOM（文档对象模型）中的某个元素上触发时，该...
Js事件流概述，以及阻止事件冒泡、阻止默认行为
Microhoo_苏福的博客
09-13 1221
Js事件流概述，以及阻止事件冒泡、阻止默认行为
【js】超链接取消默认跳转行为
hanachann的博客
02-20 949
最近在学习js的一些基础知识，遇到的一些小问题，都会记录下来。
原生js取消默认行为执行的3种方法
u010234868的专栏
07-07 1536
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="http://www.baidu.com" id="link">百度</a> <script> var link = document.getE.
JS 事件冒泡及阻止事件冒泡和默认行为
小葵坤_易安的博客
02-24 434
一、事件冒泡 1.原理：元素自身的事件被触发后，如果父元素有相同的事件，如onclick事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。 2.例：父元素与子元素具有相同的onclick事件，进行事件冒泡 元素及样式： &amp;amp;lt;div class=&amp;quot;block&amp;quot; style=&amp;quot;width: 2.
阻止冒泡事件 2020/11/24
weixin_50286102的博客
11-24 195
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
JS 阻止事件冒泡、取消默认事件（默认行为）【前端小白篇】
apjcui的博客
12-18 2598
1.冒泡事件 不多说直接放代码！！！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <div id='box1' onClick=alert('box1点击事件')> <h2...
js如何阻止事件冒泡
最新发布
08-24
另外，还可以用`return false`来阻止事件冒泡和取消默认事件。这相当于同时调用了`event.stopPropagation()`和`event.preventDefault()`。例如： ```javascript $('.btn').click(function(event) { // 阻止事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值