mirror of
https://github.com/ZiuChen/ZiuChen.github.io.git
synced 2025-08-17 23:19:55 +08:00
46 lines
28 KiB
JavaScript
46 lines
28 KiB
JavaScript
import{_ as s,o as n,c as a,a as e}from"./app.33820b61.js";const u=JSON.parse('{"title":"一文读懂事件冒泡与事件捕获","description":"","frontmatter":{},"headers":[{"level":2,"title":"💡 从例子入手","slug":"💡-从例子入手","link":"#💡-从例子入手","children":[]},{"level":2,"title":"🤔 什么是事件冒泡机制？事件捕获又是什么？","slug":"🤔-什么是事件冒泡机制-事件捕获又是什么","link":"#🤔-什么是事件冒泡机制-事件捕获又是什么","children":[{"level":3,"title":"📌 用例子验证结论","slug":"📌-用例子验证结论","link":"#📌-用例子验证结论","children":[]}]},{"level":2,"title":"🧐 为什么有两个阶段？它们有什么用？","slug":"🧐-为什么有两个阶段-它们有什么用","link":"#🧐-为什么有两个阶段-它们有什么用","children":[{"level":3,"title":"📌 历史渊源","slug":"📌-历史渊源","link":"#📌-历史渊源","children":[]},{"level":3,"title":"📌 事件代理 (Event delegation)","slug":"📌-事件代理-event-delegation","link":"#📌-事件代理-event-delegation","children":[]},{"level":3,"title":"📌 事件对象中的target与currentTarget","slug":"📌-事件对象中的target与currenttarget","link":"#📌-事件对象中的target与currenttarget","children":[]}]},{"level":2,"title":"🥳 如何阻止事件冒泡？","slug":"🥳-如何阻止事件冒泡","link":"#🥳-如何阻止事件冒泡","children":[{"level":3,"title":"📌 .stopPropagation()","slug":"📌-stoppropagation","link":"#📌-stoppropagation","children":[]},{"level":3,"title":"📌 e.target == e.currentTarget","slug":"📌-e-target-e-currenttarget","link":"#📌-e-target-e-currenttarget","children":[]},{"level":3,"title":"📌 return false","slug":"📌-return-false","link":"#📌-return-false","children":[]}]},{"level":2,"title":"相关链接","slug":"相关链接","link":"#相关链接","children":[]}],"relativePath":"article/一文读懂事件冒泡与事件捕获.md","lastUpdated":1676979063000}'),l={name:"article/一文读懂事件冒泡与事件捕获.md"},p=e(`<h1 id="一文读懂事件冒泡与事件捕获" tabindex="-1">一文读懂事件冒泡与事件捕获 <a class="header-anchor" href="#一文读懂事件冒泡与事件捕获" aria-hidden="true">#</a></h1><h2 id="💡-从例子入手" tabindex="-1">💡 从例子入手 <a class="header-anchor" href="#💡-从例子入手" aria-hidden="true">#</a></h2><p>这是一个<a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html" target="_blank" rel="noreferrer">简单的 Demo</a>，点击的 <code>Display video</code> 按钮后，将视频展示出来。</p><p>其中的视频 <code><video></code> 标签被 <code><div></code> 包裹，<code><div></code> 与 <code><video></code> 上都绑定了自己的 <code>click</code> 事件。</p><p><a href="https://code.juejin.cn/pen/7092947625791455262" target="_blank" rel="noreferrer">代码片段</a></p><p>我们的预期是：点击 <code><video></code> 时播放视频，点击 <code><div></code> 时隐藏视频，然而实际上你会发现，点击视频后，不仅视频虽然正常播放，但同时也被隐藏了。</p><p>点击子元素，父元素的事件也被触发，导致这种现象的原因正是：<strong>浏览器的事件冒泡机制</strong>。</p><h2 id="🤔-什么是事件冒泡机制-事件捕获又是什么" tabindex="-1">🤔 什么是事件冒泡机制？事件捕获又是什么？ <a class="header-anchor" href="#🤔-什么是事件冒泡机制-事件捕获又是什么" aria-hidden="true">#</a></h2><p>现代浏览器提供了两种事件处理阶段：<strong>捕获阶段与冒泡阶段</strong>，</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/712c504b08f946088fc51dd5f8959020~tplv-k3u1fbpfcp-zoom-1.image" alt="bubbling-capturing.png"></p><blockquote><p>在捕获阶段：</p><ul><li>浏览器检查元素的最外层祖先 <code><html></code> ，是否在捕获阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它。</li><li>然后，它移动到 <code><html></code> 中单击元素的下一个祖先元素，执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。</li></ul></blockquote><blockquote><p>在冒泡阶段，与上述顺序相反：</p><ul><li>浏览器检查实际点击的元素是否在冒泡阶段中注册了一个 <code>onclick</code> 事件处理程序，如果是，则运行它</li><li>然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达 <code><html></code> 元素。</li></ul></blockquote><p>当一个事件被触发时，浏览器<strong>先运行捕获阶段，后运行冒泡阶段</strong>，并且在默认情况下，<strong>所有事件处理程序都在冒泡阶段进行注册</strong>。</p><p>针对上面提到的问题，我们可以知道：当 <code><video></code> 点击事件触发后，虽然我们没有主动触发 <code><div></code> 上绑定的点击事件，但由于冒泡机制，点击事件冒泡到了 <code><div></code> 上，并触发了绑定在其上的监听回调函数，将 <code><video></code> 标签隐藏。</p><h3 id="📌-用例子验证结论" tabindex="-1">📌 用例子验证结论 <a class="header-anchor" href="#📌-用例子验证结论" aria-hidden="true">#</a></h3><p>下面是一个用于验证上述结论的Demo：</p><p>页面中包括由外向内的三个类名不同的div标签： <code>div1</code> <code>div2</code> <code>div3</code>，并为他们在捕获阶段/冒泡阶段分别绑定了不同的事件函数 <code>click</code> 和 <code>dblclick</code>。</p><p><a href="https://code.juejin.cn/pen/7092975347720781861" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">> 捕获 click div1</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 捕获 click div2</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 捕获 click div3</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 click div3</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 click div2</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 click div1</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>捕获阶段先执行，由外向内，冒泡阶段后执行，由内向外。 <code>dblclick</code> 事件并未被触发。</p><p>由此可知：</p><ul><li>事件触发 => 捕获阶段 => 冒泡阶段</li><li>默认情况下，所有事件都在冒泡阶段被注册</li><li>捕获阶段，浏览器<strong>由外层向内层</strong>逐个元素检查事件函数，如有则执行它。</li><li>冒泡阶段，浏览器<strong>由内层向外层</strong>逐个元素检查事件函数，如有则执行它。</li><li>子元素一个事件触发后，只有<strong>相同的事件会被捕获/冒泡检查</strong></li></ul><hr><p>在本例中，通过为 <code>addEventListener</code> 函数<strong>指定第三个参数，从而在捕获阶段监听事件</strong></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(type</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> listener</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> useCapture)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>当 <code>useCapture</code> 为 <code>true</code> 时，事件监听回调函数将在捕获阶段被触发。</p><h2 id="🧐-为什么有两个阶段-它们有什么用" tabindex="-1">🧐 为什么有两个阶段？它们有什么用？ <a class="header-anchor" href="#🧐-为什么有两个阶段-它们有什么用" aria-hidden="true">#</a></h2><h3 id="📌-历史渊源" tabindex="-1">📌 历史渊源 <a class="header-anchor" href="#📌-历史渊源" aria-hidden="true">#</a></h3><blockquote><p>在过去，Netscape（网景）只使用事件捕获，而Internet Explorer只使用事件冒泡。当W3C决定尝试规范这些行为并达成共识时，他们最终得到了包括这两种情况（捕捉和冒泡）的系统，最终被应用在现代浏览器中。</p></blockquote><h3 id="📌-事件代理-event-delegation" tabindex="-1">📌 事件代理 (Event delegation) <a class="header-anchor" href="#📌-事件代理-event-delegation" aria-hidden="true">#</a></h3><p>利用捕获/冒泡机制，我们可以实现事件代理，什么是事件代理？</p><p>试想一下，此时有一个包含大量列表项的无序列表，我们希望每一个 <code><li></code> 的点击事件都能被监听并且添加特定的处理函数，然而我们不可能为每一个 <code><li></code> 都添加一次事件监听函数，这样效率太低了。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Li.</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>这时，我们可以为最外层的 <code><ul></code> 绑定一个 <code>click</code> 事件的监听函数，利用捕获/冒泡机制，就可以在事件对象的 <code>target</code> 属性中拿到对应的 <code><li></code>。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ul</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// > li (实际点击的元素)</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTarget</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// > ul (事件绑定的元素)</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="📌-事件对象中的target与currenttarget" tabindex="-1">📌 事件对象中的<code>target</code>与<code>currentTarget</code> <a class="header-anchor" href="#📌-事件对象中的target与currenttarget" aria-hidden="true">#</a></h3><p>在实际的使用中，你会发现事件对象中存在两个不同的属性：<code>target</code> <code>currentTarget</code>。</p><p>它们有什么区别？和回调函数中的 <code>this</code> 的关系是怎样的？</p><p>复用上面验证捕获与冒泡顺序结论的例子，下面的代码片段验证了 <code>target</code> 和 <code>currentTarget</code> 的关系。</p><p><a href="https://code.juejin.cn/pen/7092980795211513892" target="_blank" rel="noreferrer">代码片段</a></p><p>当点击最内部的 <code>div3</code> 后，浏览器控制台输出：</p><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">> 捕获 target: div3 currentTarget: div1 this: div1</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 捕获 target: div3 currentTarget: div2 this: div2</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 捕获 target: div3 currentTarget: div3 this: div3</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 target: div3 currentTarget: div3 this: div3</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 target: div3 currentTarget: div2 this: div2</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">> 冒泡 target: div3 currentTarget: div1 this: div1</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>由此可知，事件对象中的 <code>target</code> 属性为实际触发事件的DOM元素，<code>currentTarget</code> 指向注册事件监听时绑定的DOM元素。</p><p>需要注意的是，为了验证 <code>this</code> 指向，此处使用了 <code>function</code> 声明函数替代前例中的 <code>() => {}</code>，如果仍以箭头函数形式声明，则 <code>this</code> 始终指向 <code>Window</code> 对象。</p><h2 id="🥳-如何阻止事件冒泡" tabindex="-1">🥳 如何阻止事件冒泡？ <a class="header-anchor" href="#🥳-如何阻止事件冒泡" aria-hidden="true">#</a></h2><p>如你所见，大多数情况事件冒泡机制可以为我们带来便利，但是少数情况（如本文开头的例子）下，会影响预期的代码效果，我们应该如何阻止事件冒泡呢？</p><h3 id="📌-stoppropagation" tabindex="-1">📌 .stopPropagation() <a class="header-anchor" href="#📌-stoppropagation" aria-hidden="true">#</a></h3><p>直接调用 <code>e.stopPropagation()</code> 阻止事件向上冒泡 触发其他回调</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.div1</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// some code ...</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stopPropagation</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="📌-e-target-e-currenttarget" tabindex="-1">📌 e.target == e.currentTarget <a class="header-anchor" href="#📌-e-target-e-currenttarget" aria-hidden="true">#</a></h3><p>当使用事件代理，给目标元素的父元素添加监听回调函数时添加判断</p><p>只有当<strong>实际触发元素与回调绑定的元素相同</strong>时，才触发相关逻辑</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.div1</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">==</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">currentTarget</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// some code ...</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="📌-return-false" tabindex="-1">📌 return false <a class="header-anchor" href="#📌-return-false" aria-hidden="true">#</a></h3><p>当回调内逻辑执行完毕后，直接 <code>return false</code> 可以中止事件向上冒泡</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.div1</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// some code ...</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>需要注意的是，<code>return false</code> 的方法不仅阻止了事件冒泡，而且阻止了默认事件。</p><blockquote><p><strong>默认事件</strong>：DOM元素的默认行为，选中复选框是点击复选框的默认行为。下面这个例子说明了怎样阻止默认行为的发生</p></blockquote><p>另一种阻止默认事件的方法是 <code>.preventDefault()</code></p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.div1</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// some code ...</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preventDefault</span><span style="color:#F07178;">()</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="相关链接" tabindex="-1">相关链接 <a class="header-anchor" href="#相关链接" aria-hidden="true">#</a></h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E5%8F%8A%E6%8D%95%E8%8E%B7" target="_blank" rel="noreferrer"><code>事件冒泡及捕获</code></a></p>`,63),o=[p];function t(r,c,i,d,D,y){return n(),a("div",null,o)}const C=s(l,[["render",t]]);export{u as __pageData,C as default};
|