Javascript: несколько событий запускаются из одного действия

Question

У меня есть событие onclick, прикрепленное к региону на моей странице, которое вызывает определенное действие, когда пользователь нажимает на него (естественно). Я недавно добавил изображение в этот регион. Когда пользователь нажимает на это изображение, я хочу, чтобы произошло другое действие, и я НЕ хочу, чтобы происходило действие, связанное со всей областью. Тем не менее, я обнаружил, что оба события фактически запускаются при нажатии на изображение. Как подавить действие по всему региону при нажатии на изображение?

Answer 1

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

Лучший способ сделать это, работающий во всех браузерах, это использовать JavaScript-фреймворк. jQuery имеет очень простой способ сделать это. Другие фреймворки имеют аналогичные механизмы для отмены пузырей, я просто очень хорошо знаком с jQuery.

Например, вы можете сделать что-то подобное в jQuery:

$('img').click(function () {
    // Do some stuff

    return false;// <- Cancels bubbling to parent elements.
});

Answer 2

Дарит правильно, вам нужно, чтобы событие не пузырилось (распространялось):

function imgEventHandler(e) {
    // ^notice: pass 'e' (W3C event)

    // W3C:
    e.stopPropagation();

    // IE:
    if (window.event) {
        window.event.cancelBubble = true;
    }

}

Answer 3

В обработчике события для изображения сделайте

event.cancelBubble = true;

и затем в конце сделайте

return false;