blocks|key|1283115|text|使用stopPropagation方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1283116|event.stopPropagation();|code-block|syntax|javascript|1283117|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use the stopPropagation method:</p>

<pre><code>event.stopPropagation();
</code></pre>


blocks|key|1497990|text|正如其他人所提到的，尝试使用stopPropagation()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1497991|还有第二个处理程序可以尝试：event.cancelBubble+=+true;它是IE特定的处理程序，但至少在FF中支持它。我真的不太了解它，因为我自己还没有用过它，但如果其他方法都失败了，它可能值得一试。|1497992|entityMap^0|E|H|0|E|Q|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>As others have mentioned, try <code>stopPropagation()</code>.</p>

<p>And there is a second handler to try: <code>event.cancelBubble = true;</code> It's a IE specific handler, but it is supported in at least FF. Don't really know much about it, as I haven't used it myself, but it might be worth a shot, if all else fails.</p>


blocks|key|1498024|text|别忘了IE：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1498025|if+(event.stopPropagation)+{++++//+standard
++++++++event.stopPropagation();
++++}+else+{++++//+IE6-8
++++++++event.cancelBubble+=+true;
}|code-block|syntax|javascript|1498026|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Don't forget IE:</p>

<pre><code>if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}
</code></pre>


blocks|key|1498096|text|这是理解事件冒泡概念的一个很好的例子。基于上面的答案，最终的代码将如下所示。当用户单击复选框时，将使用event.stopPropagation();停止对其父元素'header‘的事件传播。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1498097|$(document).ready(function()+{
++++++++++++$('#container').addClass('hidden');
++++++++++++$('#header').click(function()+{
++++++++++++++++if($('#container').hasClass('hidden'))+{
++++++++++++++++++++$('#container').removeClass('hidden');
++++++++++++++++}+else+{
++++++++++++++++++++$('#container').addClass('hidden');
++++++++++++++++}
++++++++++++});
++++++++++$('#header+input[type=checkbox]').click(function(event)+{
++++++++++++++if+(event.stopPropagation)+{++++//+standard
+++++++++++++++++++event.stopPropagation();
+++++++++++++++}+else+{++++//+IE6-8
++++++++++++++++++++event.cancelBubble+=+true;
+++++++++++++++}
++++++++++});+++++
++});|code-block|syntax|javascript|1498098|entityMap^0|1F|O|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>This is an excellent example for understanding event bubbling concept. Based on the above answers, the final code will look like as mentioned below. Where the user Clicks on checkbox the event propagation to its parent element 'header' will be stopped using <code>event.stopPropagation();</code>.  </p>

<pre><code>$(document).ready(function() {
            $('#container').addClass('hidden');
            $('#header').click(function() {
                if($('#container').hasClass('hidden')) {
                    $('#container').removeClass('hidden');
                } else {
                    $('#container').addClass('hidden');
                }
            });
          $('#header input[type=checkbox]').click(function(event) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });
</code></pre>


blocks|key|1498196|text|代码归功于@mehras。我只是创建了一个代码片段来演示它，因为我认为这会很受欢迎，我想找个借口来尝试这个功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1498197|​|1498198|$(document).ready(function()+{
++$('#container').addClass('hidden');
++$('#header').click(function()+{
++++if+($('#container').hasClass('hidden'))+{
++++++$('#container').removeClass('hidden');
++++}+else+{
++++++$('#container').addClass('hidden');
++++}
++});
++$('#header+input[type=checkbox]').click(function(event)+{
++++if+(event.stopPropagation)+{+//+standard
++++++event.stopPropagation();
++++}+else+{+//+IE6-8
++++++event.cancelBubble+=+true;
++++}
++});
});|code-block|syntax|javascript|1498199|div+{
++text-align:+center;
++padding:+2em;
++font-size:+1.2em
}

.hidden+{
++display:+none;
}|1498200|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div+id="header"><input+type="checkbox"+/>Checkbox+won't+bubble+the+event,+but+this+text+will.</div>
<div+id="container">click()+bubbled+up!</div>|1498201|1498202|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/4990426/mehras^0|5|7|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>Credit to <a href="https://stackoverflow.com/users/4990426/mehras">@mehras</a> for the code. I just created a snippet to demonstrate it because I thought that would be appreciated and I wanted an excuse to try that feature.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    if (event.stopPropagation) { // standard
      event.stopPropagation();
    } else { // IE6-8
      event.cancelBubble = true;
    }
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  text-align: center;
  padding: 2em;
  font-size: 1.2em
}

.hidden {
  display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="header"&gt;&lt;input type="checkbox" /&gt;Checkbox won't bubble the event, but this text will.&lt;/div&gt;
&lt;div id="container"&gt;click() bubbled up!&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1498274|text|在angularjs中，这应该是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1498275|event.preventDefault();+
event.stopPropagation();|code-block|syntax|javascript|1498276|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In angularjs this should works:</p>

<pre><code>event.preventDefault(); 
event.stopPropagation();
</code></pre>


blocks|key|1498346|text|这是一个对我有效的技巧：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1498347|handleClick+=+e+=>+{
++++if+(e.target+===+e.currentTarget)+{
++++++++//+do+something
++++}+else+{
++++++++//+do+something+else
++++}
}|code-block|syntax|javascript|1498348|说明:我将handleClick附加到模式窗口的背景上，但它也会在模式窗口内的每一次单击时触发(因为它在背景窗口的div中)。因此我添加了条件(e.target+===+e.currentTarget)，只有在单击背景时才会满足该条件。|offset|length|style|CODE|1498349|entityMap^0|0|0|5|B|1Z|U|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>Here's a trick that worked for me:</p>
<pre><code>handleClick = e =&gt; {
    if (e.target === e.currentTarget) {
        // do something
    } else {
        // do something else
    }
}
</code></pre>
<p>Explanation: I attached <code>handleClick</code> to a backdrop of a modal window, but it also fired on every click inside of a modal window (because it was IN the backdrop div). So I added the condition <code>(e.target === e.currentTarget)</code>, which is only fulfilled when a backdrop is clicked.</p>


<p>I have a checkbox that I want to perform some Ajax action on the click event, however the checkbox is also inside a container with it's own click behaviour that I don't want to run when the checkbox is clicked. This sample illustrates what I want to do:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    // Do something
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container.hidden #body {
  display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="container"&gt;
  &lt;div id="header"&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
    &lt;input type="checkbox" name="test" /&gt;
  &lt;/div&gt;
  &lt;div id="body"&gt;
    &lt;p&gt;Some content&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>However, I can't figure out how to stop the event bubbling without causing the default click behaviour (checkbox becoming checked/unchecked) to not run.</p>
<p>Both of the following stop the event bubbling but also don't change the checkbox state:</p>
<pre><code>event.preventDefault();
return false;
</code></pre>


How to stop event bubbling on checkbox click

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个复选框，我想要在点击事件上执行一些Ajax操作，但是这个复选框也在一个容器中，它有它自己的点击行为，我不想在点击它时运行它。这个示例说明了我想要做的事情：​$(document).ready(function() {  $('#container').addClass('hidden');  $('#heade...

问如何在单击复选框时停止事件冒泡
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击复选框时停止事件冒泡EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击复选框时停止事件冒泡
EN