Howto: div с onclick внутри другого div с onclick javascript

просто быстрый вопрос. У меня проблема с divs с onclick javascript внутри друг друга. Когда я нажимаю на внутренний div, он должен только запускать его onclick javascript, но внешний div javascript также запускается. Как пользователь может нажимать на внутренний div без запуска внешнего div javascript?

<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
    <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>

Ответ 1

В основном в javascript есть две модели событий. Событие и Событие барботажа. В случае барботажа, если вы нажмете на div, внутреннее событие с щелчком мыши активируется первым, а затем вызывается внешний div-щелчок. в то время как при захвате события сначала запускается внешнее событие div, а не внутреннее событие div. Чтобы остановить распространение события, используйте этот код в методе click.

   if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

Ответ 2

Ознакомьтесь с информацией о распространении событий здесь

В частности, вам понадобится такой код в обработчиках событий, чтобы остановить распространение событий:

function myClickHandler(e)
{
    // Here you'll do whatever you want to happen when they click

    // now this part stops the click from propagating
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Ответ 3

return false; из внутренней функции div onclick:

<div onclick="alert('inner'); return false;" ...

То, с чем вы имеете дело, называется распространение событий.

Ответ 4

Просто добавьте этот код:

window.event.stopPropagation();

Ответ 5

Это случай барботажа событий.

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

e.cancelBubble = true; //IE

e.stopPropagation(); //FF

Ответ 6

Еще один способ для браузеров на основе webkit:

<div onclick="alert('inner'); event.stopPropagation;" ...

Ответ 7

Здесь есть еще одна ссылка, которая поможет вам понять пузырь событий javascript.

Ответ 8

у вас есть два 'div' и три '/div'.

Ответ 9

Это было очень полезно, но это не сработало для меня.

То, что я сделал, описано здесь.

Итак, я положил условие на внешнее событие onclick:

if( !event.isPropagationStopped() ) {
    window.location.href = url;
}

Ответ 10

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

    $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
      event.stopPropagation();
    });