jQuery - нажмите событие на div, но не на флажок в div

Я пытаюсь настроить событие щелчка в div, и я хотел бы, чтобы это событие срабатывало, если этот div щелкнут где-либо, кроме флажка в div. Если флажок установлен, я не хочу, чтобы событие щелчка div срабатывало. Я устанавливаю событие щелчка для флажка и возвращаю false, что останавливает событие щелчка div, но также не позволяет установить флажок. Вот что у меня есть сейчас:

$('.theDiv').click(function() {
    // Click event for the div, I'm slide toggling something
    $('.sub-div', $(this)).slideToggle();
});

$('.checkboxInTheDiv').click(function() {
    // Do stuff for the checkbox click, but dont fire event above
    return false; // returning false won't check/uncheck the box when clicked
})

person Ryan    schedule 11.01.2010    source источник


Ответы (3)


Вместо того, чтобы возвращать false, что предотвращает действие по умолчанию, попробуйте просто остановить распространение.

$('.checkboxInTheDiv').click( function(e) {
    e.stopPropagation();
    ... other stuff...
    return true;
});
person tvanfosson    schedule 11.01.2010
comment
вот хороший способ сделать это: quirksmode.org/js/events_order.html - person Jon Bristow; 11.01.2010
comment
удивительно. Какое-то время я пытался переписать свой html. Спасибо! - person Jacob Raccuia; 20.08.2013

Вам нужно будет посмотреть на объект event, переданный в обработчик кликов, и посмотреть, какого он типа. Дополнительные сведения см. в документации по Event.Type.

function handler(event) {
  var $target = $(event.target);
  if( $target.is("li") ) {
    $target.children().toggle();
  }
}

$("ul").click(handler).find("li > ").h

Примечание. Код скопирован со связанного URL.

person Topher Fangio    schedule 11.01.2010
comment
Этот ответ особенно полезен, поскольку он работает, даже если событие связано с использованием метода .live(). - person Josh Anderson; 03.01.2011

Попробуйте простой return;

person Ariel    schedule 11.01.2010