Отдельный дочерний элемент JQuery от родителя

Question

В основном у меня есть элемент, который при нажатии вызывает другой элемент для перехода к методу slideToggle. Однако то, что я за ним, это еще один элемент, например изображение, внутри основного родительского элемента, который при нажатии на него не срабатывает при событии slideToggle и может использоваться для запуска другого события ...

Упрощенная версия мой код здесь:

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

..следующие синяя коробка представляет собой заменитель изображения.

Markup:

<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

Свойство объекта аргументов события содержит элемент, который был действительно нажат. Вы можете сравнить его с this (который будет содержать связанную .section элемент) и выяснить, был ли он .section, которая была нажата, или что-то другое:

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

Я также раздвоенный вашу скрипку, чтобы проиллюстрировать этот подход in action ,

Answer 2

Вы можете stop the propagation события на дочерний элемент:

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

Вот working example. Обратите внимание на скрипт, что я связал существующий вызов on с указанным выше, поэтому вам не нужно создавать более одного объекта jQuery.

Answer 3

Я использовал более или менее такой же подход, как James, в том, что я использовал event.stopPropagation(), но я выбрал, вместо того, чтобы оценить Цель click события в рамках метода on(), а не две цепочки или потенциально более, звонки on():

$(document).on('click', '.section, .image', function() { 
    var thisClass = $(this).is('.section') ? 'section' : 'image'; 
    if (thisClass == 'section') { 
     $(this).nextAll('.hidden:first').slideToggle(500); 
    } 
    else if (thisClass == 'image') { 
     e.preventDefault(); 
    } 
});​ 

JS Fiddle demo.