ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

stopPropagation, preventDefault 和 return false 的区别

2022-08-30 03:00:08  阅读:173  来源: 互联网

标签:return preventDefault click 事件 false 浏览器 stopPropagation 冒泡


stopPropagation

阻止事件的冒泡和捕获。

因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPropagation() 方法。

preventDefault

阻止浏览器默认行为。

浏览器的默认行为:对于一些特定的事件,浏览器有它默认的行为。

例如:

1、点击链接会进行跳转

2、点击鼠标右键会呼出浏览器右键菜单

3、填写表单时按回车会自动提交到服务器等

return false;

当你调用它时会做 3 件事:

1、event.preventDefault() – 它停止浏览器的默认行为。

2、event.stopPropagation() – 它阻止事件传播(或“冒泡”)DOM。

3、停止回调执行并立即返回。

例如可以通过 return false 来阻止 a 标签的默认跳转事件,当然也可以用 preventDefault() 来代替。

表格对比:

补充:stopPropagation和stopImmediatePropagation区别
共同点 都可以阻止事件冒泡,父节点无法接受到事件。

不同点 stopPropagation不会影响该元素后续相同事件的执行,而stopImmediatePropagation会阻止该元素后续相同事件的执行。

示例:

<div>
  <p>Daotin</p>
</div>

给p绑定一个click事件,再给p绑定第二个click事件 ,给div绑定一个click事件。

如果在p的第一个click事件回调中stopPropagation,div的click事件回调不执行,但是p的第二个click事件回调会执行,

如果在p的第一个click事件回调中stopImmediatePropagation,div的click事件回调不执行,而且p的第二个click事件也不执行。

原文出自:https://zhuanlan.zhihu.com/p/390080640

标签:return,preventDefault,click,事件,false,浏览器,stopPropagation,冒泡
来源: https://www.cnblogs.com/feitter/p/16637964.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有