Проблема с последовательными событиями щелчка

Question

У меня проблема с пониманием особого сценария события Javascript.

Для иллюстрации см. http://jsfiddle.net/UFL7X/

Когда первый раз щелкают желтое поле, я ожидаю, что вызывается только обработчик события первого щелчка, и большое поле становится зеленым. Но оба обработчика событий вызываются (большое поле становится красным), хотя второй обработчик не существовал к моменту щелчка (по крайней мере, то, что я думал).

Как это можно объяснить?

Answer 1

Итак, что происходит, это то, что ваше событие бурлит в доме.

1. Нажатие происходит div2
2. div2 вызывается функция щелчка
3. , изменяющая цвет div1
4. , назначаемый ейсобытие click для div1
5. div2 функция щелчка завершается (с неявным return true)
6. событие всплывает до родительского в DOM
7. div1 получаетсобытие всплывающего клика
8. div1 вызывается функция щелчка

, если вы не хотите, чтобы это произошло, вам нужно return false в обработчике кликов для div2

РЕДАКТИРОВАТЬ: обратите внимание, что способ организации JS может быть не лучшим, потому что если я нажимаю div2 100 раз, это означает, что div1 теперь имеет 100 событий щелчка, которые будут выполняться.

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

$("#div2").click(function() {
    $("#div1").css("background-color", "green");
    return false;
});

$("#div1").click(function() {
    $("#div1").css("background-color", "red");
});

Answer 2

Причина этого в том, что когда вы нажимаете # div2, вы также отслеживаете клик для # div1. Это можно исправить, выполнив возврат false после изменения цвета для клика # div2. Смотрите эту jsFiddle для рабочей версии: http://jsfiddle.net/mitchmalone/UFL7X/1/

$("#div1").live("click", function() {
    $("#div1").css("background-color", "red");
});

$("#div2").live("click", function() {
    $("#div1").css("background-color", "green");
    return false;
});