Событие Fire click только для самого внутреннего элемента в jQuery

Я пытаюсь запустить событие click для самого внутреннего элемента в дереве HTML, но, поскольку щелчок даже привязан к его родительскому контейнеру, запускаются оба события, а это не то, что мне нужно. Я исправил это раньше с помощью stopPropagation(), но сегодня я не могу заставить его работать.

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>

Я полагаю, что это не будет подтверждено, поскольку внутри li содержится p, но давайте на мгновение проигнорируем это для простоты. Как я могу иметь внутренний элемент slideUp() без того, чтобы родительский щелчок даже запускал его для slideDown() сразу после этого?


javascript events click jquery propagation
person Russell Strauss    schedule 21.01.2013    source источник
comment
Query следует читать jQuery Я считаю. Вероятно, вы пропустили это при копировании кода, но все равно просто заметили это.   -  person Fabrício Matté    schedule 22.01.2013

Ответы (3)


arrow_upward
4
arrow_downward

return false чтобы остановить всплытие:

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

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

Или используйте функцию stopPropagation объекта события:

jQuery('.contained').click(function(e) {                 
    Query(this).slideUp();
    e.stopPropagation();
});
person gdoron is supporting Monica    schedule 21.01.2013
comment
Второй метод - это то, как я обычно это делаю, но я получаю ошибки, что у объекта нет stopPropagation(). С другой стороны, возврат false работает прекрасно. - person Russell Strauss; 22.01.2013
comment
@RussellStrauss, насчет stopPropagation у вас просто, скорее всего, опечатка, или вы забыли объявить объект события в объявлении функции - person gdoron is supporting Monica; 22.01.2013
comment
Похоже, это не работает для динамически созданных div. Не знаю, что делать. - person Yster; 08.01.2015

arrow_upward
0
arrow_downward

Ответ заключается в том, чтобы остановить распространение события. Вы можете использовать stopPropagation и его аналог stopImmediatePropagation, чтобы сделать это, или вы можете остановить распространение и предотвратить действие по умолчанию, вернув false из обработчика. Метод stopPropagation предотвратит всплытие событий, то есть распространение события вверх по дереву DOM. StopImmdiatePropagation сделает это, но также предотвратит срабатывание других обработчиков того же уровня. Возврат false эквивалентен использованию stopPropagation и preventDefault для события.

person tvanfosson    schedule 21.01.2013

arrow_upward
0
arrow_downward

Два способа сделать это: остановить распространение или объединить два обработчика кликов и настроить код в соответствии с 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();
    }   
});
person charlietfl    schedule 21.01.2013