JQuery将父元素与子元素分开

Question

基本上我有一个元素，当点击时会导致另一个元素slideToggle。然而，我所追求的是另一个元素，比如一个图像，在主要父元素中，当点击它时，它不会触发slideToggle事件，并且可以用来触发另一个事件......

我的代码的简化版本在这里：

http://jsfiddle.net/s3d5D/6/

..蓝框代替了图像。

标记：

<div class="holder">
    <div class="section"><div class="image"></div></div>
    <div class="hidden"></div>
</div>

jQuery的：

$('.hidden').hide();
$(document).on('click', '.section', function(){
    $(this).nextAll('.hidden:first').slideToggle(500);
});

Answer 1

您可以在子元素中stop the propagation事件：

$(document).on('click', '.image', function (e) {
    e.stopPropagation();
});

这是一个working example。请注意，我已使用上述内容锁定了您现有的on调用，因此您不必创建多个jQuery对象。

Answer 2

事件参数对象的target属性包含实际单击的元素。您可以将其与this（其中包含相关的.section元素）进行比较，并找出是否是点击的.section或其他内容：

$(document).on('click', '.section', function(e){
    if (e.target == this) {
        $(this).nextAll('.hidden:first').slideToggle(500);
    }
});

我也用你的小提琴来说明这种方法in action。

Answer 3

我使用的方法与James或多或少相同，因为我使用了event.stopPropagation()，但我选择了{{1}来评估目标} click方法中的事件，而不是将on()的两个或更多个字符串连接起来：

on()

JS Fiddle demo