共计 976 个字符，预计需要花费 3 分钟才能阅读完成。
大家好，我是前端队长 Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿态。
以下注释：
stopPropagation
阻止事件的冒泡和捕捉。
因为事件能够在各层级的节点中传递, 不论是冒泡还是捕捉, 有时咱们心愿事件在特定节点执行完之后不再传递, 能够应用事件对象的 stopPropagation() 办法。
preventDefault
阻止浏览器默认行为。
浏览器的默认行为：对于一些特定的事件，浏览器有它默认的行为。
例如：
- 点击链接会进行跳转
- 点击鼠标右键会呼出浏览器右键菜单
- 填写表单时按回车会主动提交到服务器等
return false;
当你调用它时会做 3 件事：
- event.preventDefault() – 它进行浏览器的默认行为。
- event.stopPropagation() – 它阻止事件流传（或“冒泡”）DOM。
- 进行回调执行并立刻返回。
例如能够通过 return false 来阻止 a 标签的默认跳转事件，当然也能够用 preventDefault() 来代替。
表格比照：
| 办法 | 事件冒泡 / 捕捉 | 默认事件 |
|---|---|---|
| stopPropogation() | 不冒泡 | 执行 |
| preventDefault() | 冒泡 | 不执行 |
| return false | 不冒泡 | 不执行 |
补充：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 事件也不执行。
— End —
你好，我是前端队长 Daotin，专一分享前端与认知。心愿在这里，和你分享我的前端学习和工作教训，记录个人成长。
想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿态。