如何防止孩子点击父点击 [英] How to prevent children click on parent click

问题描述

我已经完成了下面的代码结构，并且点击<$ c $时执行 addClass item_box_popup 和 removeClass item_box c> item_box div 。

 < div class =item_box <！ - 这是小div，当点击更改item_box_popup div  - > 
< div class =name> ...< / div> 
< div class =detail> ...< / div> 
< / div> 
 
< div class =item_box_popup> <！ - 此div展开以显示详细信息，其中的孩子有一个点击事件 - > 
< div class =name> ...< / div> 
< div class =detail> ...< / div> 
< / div> 
  

item_box div 它而不是孩子。工作是将 item_box_pop div 由 addClass 和 removeClass 更改$ c>点击。

item_box_popup 没有点击事件，但是孩子们定义了点击事件。我们使用 delegate 定义 .item_box_popup .name 等的点击事件。

问题是当我们点击 item_box div 为 .item_box_popup .name 也被触发。这可能是由于为 .item_box 单击定义的更改类。

我不希望点击 .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;<！ - 这是设置.item_box_popup  - > 
}的位置
}）; 
  

.item_box_popup

  $（body）。delegate（'。item_box_popup .name，.item_box_popup .detail'，'click'，function ）{
 // this code for this 
}）; 
  

e.stopPropagation（）; 默认点击处理程序 .item_box

解决方案

尝试添加event.preventDefault ）;在您确实希望发生的调用后，它停止默认操作发生，例如。 a元素的默认动作。

我不能说准确的位置调用，或者它是否会解决你的问题，而没有看到你的js代码。 html不是你的问题所在，它的js代码，所以如果这（或其他答案发布时，我在输入这个！）不能工作，你可以编辑你的帖子包括你的js，请？ p>

更新：

我已将您的代码复制到JSFiddle并添加了e。 stopPropagation（）调用item_box点击处理程序，并按预期工作： http://jsfiddle.net/chkaQ / 2 /

当您点击item_box子div时，它会将其更改为item_box_popup，而不执行item_box_popup子级点击事件...我错了，还是这不是你想要的？

I have done the following code structure and doing addClass item_box_popup and removeClass item_box on click of 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>

The item_box div has a click event in it and not the children. The working is to change the div to item_box_pop div by addClass and removeClass when clicked.

The item_box_popup does not have a click event but the children has the click event defined. We have used delegate to define the click event for .item_box_popup .name etc.

The problem is when we click the item_box div the click event defined for .item_box_popup .name is also getting triggered. This may be due to the change class defined on click for .item_box.

I don't want the click event to trigger on the children when .item_box is clicked. I have tried undelegate to stop triggering of click on item_box children and just do the change class defined in the click for it but this is not working.

The click event for .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-->              
    }           
});

The click event for .item_box_popup

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

e.stopPropagation(); disables the default click handler of .item_box

解决方案

Try adding event.preventDefault(); after the call that you do want to happen, it stops the default action from happening e.g. the default action of an a element.

I can't say exactly where to try the call or whether it will solve your problem without seeing your js code though. The html isn't where your problem is, its the js code, so if this (or the other answer that posted while I was typing this!) doesn't work can you edit your post to include your js, please?

Update:

I've copied your code into JSFiddle and added an e.stopPropagation() call to the item_box click handler, and it works as I expected: http://jsfiddle.net/chkaQ/2/

When you click on an item_box child div, it changes it to an item_box_popup and doesn't execute the item_box_popup child click event... have I got it wrong, or is that not what you want it to do?

这篇关于如何防止孩子点击父点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！