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

Question

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

Answer 1

Darit правильно, вам нужно остановить событие от барботирования (распространяющиеся):

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

    // W3C: 
    e.stopPropagation(); 

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

} 

Answer 2

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

event.cancelBubble = true; 

, а затем в конце сделать

return false; 

Answer 3

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

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

Например, вы могли бы сделать что-то вроде этого в JQuery:

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

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