如何阻止父点击事件更改复选框

Question

我在父容器中有一个复选框,它有一个click事件,每当我尝试单击复选框时,父对象首先工作,然后是更改事件,我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/