javascript - 父 div 上的 jQuery 但不是子 div

Question

说我有这个

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

当单击 .parent 时，只要未单击 .child2 ，我如何让 jQuery 执行某些操作？我尝试使用 event.stopPropagation() 但它没有用。这就是我所拥有的：

$('body').on({
    click: function(event)
    {
        event.stopPropagation();
    }
},'.child2');

$('body').on({
    click: function()
    {
        //blah blah
    }
},'.parent');

Answer 1

您可以使用stopPropagation事件对象的方法：

$('.parent').on('click', function(){
  // ...
}).find('.child2').on('click', function(event){
   event.stopPropagation();
});

http://jsfiddle.net/c8bqM/

Answer 2

它实际上适用于停止传播。请参阅下面的代码，它对我有用。

$(文档).ready(函数(){

$(".parent").click(function(){
    alert("this is test");
});
$(".parent div").click(function(e) {
    e.stopPropagation();

});

});

http://jsfiddle.net/rameshwor/p4MFb/1/

Answer 3

你可以试试这个

$(document).ready(function() {
    $('.parent').on('click', function() {
        alert('parent');
    }); 

    $('.child2').on('click', function() {
        $('.parent').off('click');
    });
});

小提琴：http: //jsfiddle.net/g3n3p/