วิธีหยุดการทำฟองอากาศในช่องทำเครื่องหมายให้คลิก

ฉันมีช่องทำเครื่องหมายที่ฉันต้องการดำเนินการบางอย่างของ Ajax ในกิจกรรมคลิกอย่างไรก็ตามช่องทำเครื่องหมายยังอยู่ในคอนเทนเนอร์ด้วยพฤติกรรมการคลิกของตัวเองซึ่งฉันไม่ต้องการเรียกใช้เมื่อคลิกที่ช่องทำเครื่องหมาย ตัวอย่างนี้แสดงสิ่งที่ฉันต้องการทำ:

$(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
  });
});

#container.hidden #body {
  display: none;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="container">
  <div id="header">
    <h1>Title</h1>
    <input type="checkbox" name="test" />
  </div>
  <div id="body">
    <p>Some content</p>
  </div>
</div>

อย่างไรก็ตามฉันไม่สามารถหาวิธีหยุดเหตุการณ์ที่เกิดขึ้นโดยไม่ทำให้เกิดพฤติกรรมการคลิกเริ่มต้น

ทั้งสองอย่างต่อไปนี้หยุดการเดือดปุด ๆ ของเหตุการณ์ แต่ไม่เปลี่ยนสถานะช่องทำเครื่องหมาย:

event.preventDefault();
return false;

แทนที่

event.preventDefault();
return false;

กับ

event.stopPropagation();

event.stopPropagation ()

หยุดเดือดปุด ๆ ของเหตุการณ์ไปยังองค์ประกอบหลักป้องกันไม่ให้ตัวจัดการหลักใด ๆ จากการได้รับแจ้งของเหตุการณ์

event.preventDefault ()

ป้องกันเบราว์เซอร์ไม่ให้ดำเนินการตามค่าเริ่มต้น ใช้เมธอด isDefaultPrevented เพื่อทราบว่าเมธอดนี้เคยถูกเรียก (บนวัตถุเหตุการณ์นั้น)

ใช้เมธอด stopPropagation:

event.stopPropagation();

อย่าลืม IE:

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

stopPropagation()เป็นคนอื่นได้กล่าวถึงลอง

และมีตัวจัดการที่สองลอง: event.cancelBubble = true;เป็นตัวจัดการเฉพาะ IE แต่ได้รับการสนับสนุนอย่างน้อย FF ไม่ค่อยรู้อะไรเกี่ยวกับมันมากนักเพราะฉันไม่ได้ใช้มัน แต่มันอาจจะคุ้มค่ากับการยิงถ้าทุกอย่างล้มเหลว

นี่เป็นตัวอย่างที่ยอดเยี่ยมสำหรับการทำความเข้าใจแนวคิดเหตุการณ์เดือดปุด ๆ ตามคำตอบข้างต้นรหัสสุดท้ายจะมีลักษณะตามที่ระบุไว้ด้านล่าง ในกรณีที่ผู้ใช้คลิกบนช่องการขยายพันธุ์เหตุการณ์ที่องค์ประกอบหลักของ 'หัว' event.stopPropagation();จะหยุดใช้

$(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;
               }
          });     
  });

เมื่อใช้ jQuery คุณไม่จำเป็นต้องเรียกใช้ฟังก์ชันหยุดแยกต่างหาก

คุณสามารถส่งคืนfalseในตัวจัดการเหตุการณ์

วิธีนี้จะหยุดกิจกรรมและยกเลิกการเดือดปุด ๆ

ดูที่event.preventDefault () เทียบกับ return false

จากเอกสาร jQuery:

ขนย้ายวัสดุเหล่านี้จึงอาจป้องกันการจัดการที่ได้รับมอบจากวิกฤติโดยการเรียกหรือกลับevent.stopPropagation()false

ให้เครดิต@mehrasสำหรับรหัส ฉันเพิ่งสร้างตัวอย่างเพื่อแสดงให้เห็นเพราะฉันคิดว่ามันจะได้รับการชื่นชมและฉันต้องการข้ออ้างที่จะลองใช้คุณสมบัตินั้น

$(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;
    }
  });
});

div {
  text-align: center;
  padding: 2em;
  font-size: 1.2em
}

.hidden {
  display: none;
}

<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>

ใน angularjs สิ่งนี้ควรจะได้ผล:

event.preventDefault(); 
event.stopPropagation();