事件冒泡和默认行为

最新推荐文章于 2022-06-10 09:25:08 发布
最新推荐文章于 2022-06-10 09:25:08 发布
阅读量371 收藏 1
点赞数 1
分类专栏： js基础 文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xj932956499/article/details/121136390
版权

事件冒泡，推荐示例好文

总结：

冒泡：子集和父级都有事件(比如click)，会依次由内到外冒泡响应，但是如果在子集写了①则会阻止所有父级事件的响应。

默认行为：a标签的href，虽然给a写了click事件，但是在点击a标签的时候，会依次响应click事件，然后再响应默认行为，既跳转href的地址，另外还有touchmove事件，他的默认行为是触发滑动滚动，如果使用②则能阻止a标签默认跳转和touchmove的滚动行为

①event.stopPropagation(); 

   仅阻止事件冒泡，不阻止默认行为

②event.preventDefault(); 

   仅阻止默认行为，不阻止事件冒泡

③return false;

   阻止事件冒泡且阻止默认行为

朝阳群众Jone
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
冒泡事件、默认事件、事件委托、事件监听和事件捕获
Renkx0404的博客
06-27 648
知识点： 1. 冒泡事件； 2. 默认事件； 3. 事件的委托； 4. 事件捕获；冒泡事件： 个人理解，以点击事件为例说明，在父子元素中都有点击事件，当仅获取子元素的点击事件时，这时父元素的点击事件也会发生，这种情况是在js中不想要的，所以我们要阻止冒泡事件。函数效果： 1：点击子元素是父子元素同时出现的效果。 2：阻止父元素的事件效果。 函数思路： 1：构
冒泡事件和默认事件
weixin_49295874的博客
11-23 844
什么是冒泡事件 在一个对象上触发某类事件（比如单击click事件），如果对象定义了此事件处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件的处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至他被处理（腹肌对象的所有同类事件都将被激活），或者他达到了对象层次的最顶级，即document对象（有些浏览器是window） 什么是默认事件 浏览器的一些默认行为。例如：点击超链接跳转，滑动滚动条控制滚动条 滚动 如何阻止冒泡事件（W3C） 阻止冒泡事件，不让事件向windo
小程序 -- input公共bindinput方法
weixin_41451859的博客
05-07 2142
<input value="{{ name }}" data-val="name" bindinput="bindInput" /> <input value="{{ phone }}" data-val="phone" bindinput="bindInput" /> data: { name: '', phone: '' }, bindInput(e) {...
Event、默认事件、事件冒泡
qq_41648408的博客
03-01 942
这里打印出来的Event对象是 React 封装过的SyntheticEvent，可以看__proto__.constructor。React 标准化了事件对象，因此在不同的浏览器中都会有相同的属性。 React 中事件绑定跟 Vue 中完全不同，Vue中事件绑定和触发的对象为同一元素，React中事件触发的对象为document，绑定元素为当前元素。React的所有事件都会被挂载到document上和DOM事件不同。 Vue 的Event是原生，事件被挂载到当前元素和DOM事件一样 Get Event g
JQuery事件冒泡和默认行为代码实例
10-15
主要介绍了JQuery事件冒泡和默认行为代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
jQuery中事件的冒泡和默认行为
01-20
什么是事件的默认行为？ 就是像a标签那样，没有绑定事件，但只要点击了就会自动跳转的行为 像提交按钮一样，没有绑定事件，但是点击就会提交表单信息，自动跳转 如何阻止事件的默认行为？ 方式一：在事件的回调函数...
js阻止冒泡和默认事件（默认行为）详解
10-21
主要为大家详细介绍了js阻止冒泡和默认事件，即默认行为,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
浅谈jQuery 中的事件冒泡和阻止默认行为
10-22
下面小编就为大家带来一篇浅谈jQuery 中的事件冒泡和阻止默认行为。小编举得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
了解及阻止事件冒泡和默认行为
weixin_48732879的博客
11-15 96
<body> <div class="father"> <div class="son"></div> </div> <a href="https://www.baidu.com">我是百度</a> </body> JQuery.js /* 1、什么是事件冒泡 2、如何阻止事件冒泡 3、什么是默认行为 4、如何阻止默认行为 */ $(".son").click(function(ev.
如何阻止事件冒泡和默认（行为）事件？
binlety
08-04 7503
1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素； 3.return false  ； 这个方...
js中的事件冒泡，事件捕获，默认事件
lwx931449660的博客
03-04 1660
js中的事件传递方式有两种： 冒泡 和 捕获。 事件冒泡 js中事件会以冒泡的形式由内到外的向上传递。由最内层点击元素向外扩散到最外层元素，激活外层注册的相应事件，这就是事件冒泡。 事件冒泡是js语言中事件的传递过程，传递方式，我们会需要用到它来做一下事情，但有时它的存在也会影响我们的操作。 使用：事件代理(事件委托) 什么是事件代理：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，使用父元素来代理多个子元素的事件。 这样做可以减少DOM操作，减少事件的注册步骤，提升性能
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别...
weixin_33774615的博客
11-11 1822
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，...
简述事件捕获和事件冒泡的区别
热门推荐
zj950307的博客
06-04 1万+
这个在面试中是一个问的比较多的问题，有时候也会在笔试的简答题中碰到。首先我们要知道：一个完整的js事件流是从window开始，最后回到window的过程，如下图所示：1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段；以一段具体的代码来看：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset...
JavaScript-----阻止事件默认行为和事件冒泡
weixin_45904557的博客
06-10 2221
目录一.阻止事件默认行为1.preventDefault();方法2.低版本浏览器 returnValue属性3.return false;e.stopPropagation();e.cancelBubble = true; 阻止事件冒泡的兼容性解决方案阻止事件默认行为的三种方法: 以下是没有阻止冒泡行为的示例,会从最具体的元素向上床底: //stop 停止 Propagation传播//ie cancel取消 bubble泡泡 阻止冒泡排序之后:...
事件的冒泡行为和默认行为
weixin_34208283的博客
09-26 181
<div style="height:200px;width:200px;background:#ccc;"> <input type='button' value='按钮'> </div> // 测试冒泡事件（重叠的这些元素都绑定了同一个事件） 顺序 从小往大 /* $('input').click(fu...
事件冒泡与默认行为
weixin_30644369的博客
02-01 301
在说事件冒泡之前，我们先说说事件对象（Event） Event 在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息） 所有浏览器都支持Event对象，但支持方式不同 IE中的事件对象：window.event 　　　　　/* 封装Event对象 ...
关于事件冒泡和浏览器默认行为
Riptide
03-11 1416
GoodSite：http://caibaojian.com/javascript-stoppropagation-preventdefault.html    : http://www.cnblogs.com/lidabo/archive/2012/05/23/2514701.html 《一》 关于事件冒泡：    阻止事件冒泡得注意一下，w3c的方法是e.stopPropag
vue同时添加阻止冒泡和阻止默认行为
最新发布
08-21
在Vue中同时添加阻止冒泡和阻止默认行为的方法是使用`@click.stop.prevent`指令。`@click.stop`用于阻止事件冒泡，而`@click.prevent`用于阻止默认行为。通过将这两个指令同时应用在元素上，可以实现同时阻止事件冒泡和阻止默认行为的效果。例如，如果想要在点击`<a>`标签时同时阻止冒泡和阻止默认行为，可以这样写： ```html <a @click.stop.prevent="yourMethod">Click me</a> ``` 在上述例子中，`@click.stop.prevent`会阻止事件冒泡和阻止`<a>`标签的默认行为。你可以将`yourMethod`替换为你想要执行的具体方法。这样，当点击`<a>`标签时，事件不会向上冒泡，也不会触发`<a>`标签的默认行为。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue和原生js的冒泡/阻止冒泡，默认事件/阻止默认事件](https://blog.csdn.net/weixin_54368936/article/details/121720578)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值