On-Click 'div' внутри 'div' выполняет обработчики событий div div

Question

У меня есть Div внутри Div, я пытаюсь сохранить разные обработчики onClick для div, но при нажатии на внутренний div, оба события Обработчики выполняются, и один из внутренних div сначала вызывается, а затем Oter div,

Я не хочу выполнять оба.

Код:

<div style="width:100%;height:200px;background-color:yellow" onclick="alert('Div A');return false;"> 
This is Div A 

<div style="width:20%;height:100px;background-color:red" onclick="alert('Div B');return false;"> 
This is Div B 
</div> 
</div> 

Jsfiddle: fiddle

Answer 1

Просто добавьте event.stopPropagation(); внутри OnClick из внутренней <div>.

Как это:

<div style="width:100%;height:200px;background-color:yellow" onclick="alert('Div A');return false;"> 
    This is Div A 
    <div style="width:20%;height:100px;background-color:red" onclick="event.stopPropagation(); alert('Div B');return false;"> 
     This is Div B 
    </div> 
</div> 

Answer 2

<div style="width:100%;height:200px;background-color:yellow" onclick=" if (!e) var e = window.event; 
 
    e.cancelBubble = true; 
 
    if (e.stopPropagation) e.stopPropagation();alert('Div A');return false;">This is Div A 
 
<div style="width:20%;height:100px;background-color:red" onclick=" if (!e) var e = window.event; 
 
    e.cancelBubble = true; 
 
    if (e.stopPropagation) e.stopPropagation();alert('Div B');return false;"> This is Div B</div> 
 
</div>

добавить этот код в функции OnClick

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

fiddle

Подробнее о захвате событий и пузырьках событий here и here

Answer 3

Во-первых: не используйте встроенные обработчики кликов. Это небезопасно, а встроенные обработчики запускают новый js-интерпретатор при каждой активации;
Во-вторых: используйте некоторый механизм для идентификации ваших div (например, data-id или просто id);
Третий: используя event delegation, вам понадобится только один обработчик и, вам не нужно беспокоиться о захвате/пузырьках событий.

Например:

// append handler to click for anything within the body of your document 
 
document.body.addEventListener('click', reportFromDiv); 
 

 
// one handler for divs with data-id attribute 
 
function reportFromDiv(evt) { 
 
    var from = evt.target || evt.srcElement; 
 
    // do nothing for elements without the data-id attribute 
 
    if (!from.getAttribute('data-id')) { 
 
     return true; 
 
    } 
 
    return report(from.getAttribute('data-id')); 
 
} 
 

 
function report(str) { 
 
    document.querySelector('#report').textContent += 'clicked: ' + str + '\n'; 
 
}

<div style="width:100%;height:200px;background-color:yellow" data-id="divA"> 
 
This is Div A 
 
<div style="width:20%;height:100px;background-color:red" data-id="divB"> 
 
    This is Div B 
 
</div> 
 
</div> 
 
<pre id="report"></pre>

Answer 4

$(document).ready(function() { 
 
    $(".yellow").click(function() { 
 
     alert("Div A"); 
 
    }); 
 
    $(".red").click(function (objEvent) { 
 
     objEvent.stopPropagation(); 
 
     alert("Div B"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:100%;height:200px;background-color:yellow" class="yellow">This is Div A 
 
<div style="width:20%;height:100px;background-color:red" class="red"> This is Div B</div> 
 
</div>