如何防止儿童点击父母点击

Question

我已经完成了以下代码结构,addClass item_box_popup并且removeClass item_box点击了item_box div.

<div class="item_box"> <!--This is the small div which when clicked changes to the item_box_popup div-->
  <div class="name">...</div>
  <div class="detail">...</div>
</div>

<div class="item_box_popup"> <!--This div expands to show the detail and the children in it has a click event-->
  <div class="name">...</div>
  <div class="detail">...</div>
</div>

其中item_box div有一个click事件,而不是孩子.工作是要改变到div item_box_pop div通过addClass和removeClass点击时.

在item_box_popup没有click事件,但孩子已定义click事件.我们已经习惯delegate定义click事件.item_box_popup .name等.

问题是当我们点击item_box div定义的click事件时.item_box_popup .name也会被触发.这可能是由于click for上定义的更改类所致.item_box.

单击时,我不希望在子项上触发click事件.item_box.我试图undelegate停止触发点击item_box子项,只是执行单击中定义的更改类,但这不起作用.

点击事件 .item_box

$('.slide > div').bind('click',function(e) {
    if(!$(this).hasClass('item_box_popup')){
        var index=$('.slide > div').index(this);
            $(this).removeClass('item_box');
            $(this).addClass('item_box_popup');     
        Nomad.config.firstVisibleItem=index;<!--This is to set the position for .item_box_popup-->              
    }           
});

点击事件 .item_box_popup

$("body").delegate('.item_box_popup .name, .item_box_popup .detail','click', function(e){
  //working code here for this
});

e.stopPropagation(); 禁用默认的单击处理程序 .item_box

Answer 1

您需要使用stopPropagation阻止事件"冒泡"到父级:http://api.jquery.com/event.stopPropagation/