Несколько событий во вложенных элементах

Question

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

Вот пример HTML:

<div class="line"> 
    <input type="checkbox" /> 
    <p>No, I don't want more newsletters</p> 
</div> 

достаточно просто. Теперь, когда пользователь нажимает на этот флажок, он получает check/unchecked, и событие пузырится до элемента div.line, что может изменить его цвет фона или что-то в этом роде. Теперь, как я уже сказал, я также хочу, чтобы пользователь мог манипулировать значением флажка, нажав на div. Звучит достаточно просто; мы просто добавляем наблюдателя в элемент div.line, улавливаем событие и переключаем значение флажка. Ну, вот в чем проблема: Когда вы нажимаете на этот флажок, это значение переключается. Однако, поскольку он находится внутри div, вы также нажимаете на div, вызывая его наблюдателя, который, в свою очередь, переключает значение флажка еще раз. Таким образом, вы в конечном итоге, где вы начали. Возникают два переключения.

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

У кого-нибудь есть ключ? Кстати, я использую Prototype.

Answer 1

Используйте <label> элемент с соответствующим образом направлено for attribute:

<label for="cb"><input type="checkbox" id="cb" /> Click anywhere here</label> 

Demo here.

Выгода заключается в том, что разметка становится семантически приемлемой. Обратите внимание, что атрибут for является технически необязательным, если вы переносите целевой элемент управления таким образом, но IE < 7 не поддерживает это (но отлично работает с этим размещенным образцом).

Answer 2

Вам не нужно привязывать какое-либо событие к внутреннему входному элементу. Вам просто нужно прикрепить событие к родительскому div, и вы сможете достичь того, что хотите. Поведение основано на механизме барботирования событий. Когда вы нажимаете на поле ввода, событие разворачивается к внешнему div (в отличие от захвата события - который проходит от родителя к его дочерним элементам).

Так что простой обработчик событий для div.line сделал бы трюк для вас.

$('.line').click(function (evt) { 
    console.log("change color here"); 
    $('input[type="checkbox"]').attr('checked','checked'); 
});