Как назначить разные обработчики событий для элементов и их родителей

Question

Скажем, у меня есть такая структура:

<ul id="a">text
    <li id="b">text</li>
    <li id="c">text</li>
</ul>

Как я могу назначить различные обработчики событий (скажем, прослушиватель onclick) для a, b и c?Когда я назначаю обработчик для <ul>, он срабатывает при нажатии любого из <li>.

Answer 1

вместо установки отдельного обработчика для каждого элемента в вашем списке, лучше использовать один прослушиватель событий для родителя и, используя делегирование события, определять, какой идентификатор элемента выбран пользователем

$('ul').on('click', function(evt) {
   id = evt.target.id;
   switch (id) {
      "a" : ... break;
      "b" : ... break;
      "c" : ... break;
      default: ... ;
   }   

});

Answer 2

Всякий раз, когда происходит событие, оно «пузырится». Это означает, что он вызывается для фактического элемента, связанного с ним, но он также запускается один раз для каждого родительского элемента в цепочке вплоть до самого верха. Так что в вашем случае, когда вы нажимаете b или c, событие будет также вызываться для a. Чтобы этого избежать, нужно прекратить пузыриться.

В частности, в ваших обработчиках событий для b и c вы должны остановить всплывающее событие, выполнив следующее:

if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;

Большинство браузеров поддерживают stopPropagation в событии для прекращения всплытия. В старых версиях IE используется свойство cancelBubble. Таким образом, вышеприведенное должно быть совместимо с браузерами

Я знаю, что вы не указали jQuery, но, поскольку он настолько популярен, стоит отметить, что если вы используете jQuery, это условие скрыто за рамками, поэтому вы можете просто сделать:

event.stopPropagation()

Answer 3

Каждое событие всплывает в DOM-дереве (или, по крайней мере, «должно», как в IE).Вы можете прекратить это пузырение, см. ответ Бен Ли .Но есть и лучший способ:

Просто проверьте, было ли вызвано событие, вызывающее слушателя, для элемента, который вы смотрите, или нет.Затем выполните ваш обработчик или побег.

document.getElementById("a").addEventListener("click", function(e) {
    var a = e.currentTarget; // reference to #a
    var t = e.target; // this may be #b or #c or any of their children - or not
    if (a != t)
        return;
    // else
    // do what you wanted to do
}, false);

Answer 4

Я также столкнулся с той же проблемой в одном из моих проектов. Сначала я объявил глобальную переменную (для цели флага и значения по умолчанию false). Затем я запустил события onmouseover и onmouseout для всех дочерних элементов и изменил значение флага на true, когда курсор находится над дочерним элементом (и возвращаю его обратно в false, когда он покидает дочерний элемент). Поэтому, объявляя функцию onclick для родителя, просто поставьте условие, чтобы проверить значение флага.

Answer 5

Вы можете использовать это.

$('ul li#a').click(function(){
//some thing here...
});
$('ul li#b').click(function(){
//some thing here...
});