javascript - 如何防止更改复选框的父单击事件

Question

我在父容器内有一个复选框，它有一个点击事件，每当我尝试点击复选框时，父点击首先起作用，然后是更改事件，我正在使用 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');
});

Fiddle example

Answer 1

您必须在复选框上绑定(bind)click 事件，而不是change 事件:http://jsfiddle.net/ohc8jt6w/