如何防止父單擊事件更改復選框

Question

我在一個帶有click事件的父容器中有一個復選框，每當我嘗試單擊該復選框時，父單擊首先起作用，然后由change事件e.stopPropagation(); ，我正在使用e.stopPropagation(); 在父母和孩子的事件上，但仍然無法正常工作

// make the .parent react
 function grandParent(){
    alert('Grand Parent: You hit me, my child or my grand child, now deal with me!');
}

// make the .parent react
$('.parent').on('click', function(e){
    e.stopPropagation()
    alert('Parent : Don\'t you dare hitting me or my child, again!');
});

// make the child cry, when we hit him.
$('.child').on('click', function(e){
e.stopPropagation();
 alert('Child : waaaaaa waaaa waa huh huh waaa waaaa!');
});

$('.hello').on('change', function(e){
e.stopPropagation();
 alert('checkbox clicked');
});

小提琴的例子

Answer 1

您必須在復選框上綁定click事件，而不是綁定change事件： http : //jsfiddle.net/ohc8jt6w/

Answer 2

事件的順序很重要，首先發生click事件，然后發生Change事件，因此，您需要將事件處理類型更改為Click click here，以查看單擊事件后發生的事件的順序/優先級。

$('.hello').on('click change', function(e){
e.stopPropagation(); 
 alert('checkbox '+e.type);
});

Answer 3

發生這種情況是因為e.stopPropagation(); 處於change事件， .child具有單擊事件。 您可以像@rikpg示例中一樣執行此操作，但是如果您需要更改事件，則應僅將新的一click event添加到僅具有stopPropagation復選框

http://jsfiddle.net/wppv2152/2/