火灾点击事件只有最里面的jQuery元素

我想点击HTML树中最内层元素的点击事件，但由于有一个点击甚至绑定到它的父容器，这两个事件都会被触发，这是不是我所需要的。我之前用stopPropagation（）解决了这个问题，但我似乎无法让它在今天工作。火灾点击事件只有最里面的jQuery元素

jQuery('#parent li').click(function() { 
    jQuery(this).children('.contained').slideDown(); 
}); 
jQuery('.contained').click(function() {     
    Query(this).slideUp(); 
});

，让我们说这是我们的HTML：

<ul id="parent"> 
    <li> 
     click to show more 
     <p class="contained">click to hide</p> 
    </li> 
</ul>

我相信，这将无法验证，因为它包含了一个礼中的P，但让我们忽略暂时为了简单起见。我怎么能没有父点击内部元素slideUp（）甚至触发它后立即slideDown（）？

来源

2013-01-21 Russell Strauss

'Query'应读作jQuery'我相信。在复制代码的时候可能你错过了它，但只是注意到了。 –

return false停止冒泡：

jQuery('.contained').click(function() {     
    Query(this).slideUp(); 
    return false; 
});

注意，返回false也阻止事件的默认行为。 Read more here。

或者使用事件对象的stopPropagation功能：

来源

2013-01-21 22:32:24 gdoron

谢谢你，先生！我从未意识到你可以这样做。 –

第二种方法是我通常如何做到这一点，但我得到的错误是对象没有stopPropagation（）。另一方面，返回错误的作品非常漂亮。 –

@RussellStrauss，关于'stopPropagation'你可能有一个拼写错误，或者你忘记在“函数声明”中声明事件对象 – gdoron

答案是阻止事件的传播。您可以使用stopPropagation及其双胞胎，stopImmediatePropagation来做到这一点，或者您可以通过从处理程序返回false来停止传播并阻止默认操作。 stopPropagation方法将防止事件冒泡，也就是事件在DOM树上的传播。 stopImmdiatePropagation可以做到这一点，但也可以防止同一级别的其他处理器开火。返回错误等同于在事件上使用stopPropagation和preventDefault。

来源

2013-01-21 22:34:12 tvanfosson

两种方式做到这一点，停止传播或将二者结合起来点击处理和调整代码根据event.target

目标方法：

jQuery('#parent li').click(function(event) { 
    var $tgt=jQuery(event.target) 
    if (!$tgt.is('.contained')){ 
     jQuery(this).children('.contained').slideDown(); 
    }else{ 
     $tgt.slideUp(); 
    } 
});

来源

2013-01-21 22:37:16 charlietfl

火灾点击事件只有最里面的jQuery元素

回答

相关问题