Howto: div с onclick внутри другого div с onclick javascript - PullRequest
Новая
       84

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

43 голосов
/ 05 марта 2010

просто быстрый вопрос. У меня проблема с 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>

Ответы [ 11 ]

90 голосов
/ 05 марта 2010

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

   if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
18 голосов
/ 05 марта 2010

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

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

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();
}
6 голосов
/ 17 апреля 2014

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

window.event.stopPropagation();
5 голосов
/ 05 марта 2010

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

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

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

3 голосов
/ 05 марта 2010

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

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

e.cancelBubble = true; //IE

и 

e.stopPropagation(); //FF
2 голосов
/ 23 февраля 2012

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

<div onclick="alert('inner'); event.stopPropagation;" ...
0 голосов
/ 19 апреля 2018

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

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

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

0 голосов
/ 22 апреля 2015

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

    $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
      event.stopPropagation();
    });
0 голосов
/ 03 августа 2012

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

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

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

if( !event.isPropagationStopped() ) {
    window.location.href = url;
}
0 голосов
/ 24 июля 2010

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...