it-swarm.com.ru

Как сделать: div с помощью onclick внутри другого div с помощью onclick javascript

просто быстрый вопрос. У меня проблема с div-файлами с onclick javascript внутри друг друга. Когда я нажимаю на внутренний div, он должен запускать только javascript, но также запускается внешний 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>
42
Daniel Brink

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

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

Проверьте информацию о распространении событий здесь

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

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();
}
18
Tim Goodman

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

window.event.stopPropagation();
6
user3438083

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

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

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

5
Tatu Ulmanen

Это случай всплытия событий.

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

e.cancelBubble = true; //IE

а также

e.stopPropagation(); //FF
3
rahul

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

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

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

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

Поэтому я поставил условие для внешнего события onclick:

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

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

0
Ben

Это сработало для меня в Jquery:

$('#outer_element').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("Outer element is clicked")                       
});

Таким образом, если текущая цель не совпадает с внешним div, она ничего не будет делать. Вы можете реализовать обычные функции на дочерних элементах.

0
Ramtin

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

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

0
AngelQuesada

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

0
freddie