单击html框内的事件框

Question

I have code:

 var box = document.querySelectorAll("div"); box.forEach(function(element) { element.onclick = function() { alert(this.innerText); } }); 

 <div style="height: 500px; width: 500px; background: red"> A <div style="height: 200px; width: 200px; background: blue;"> B </div> </div> 

When I click Box B, I just want to show "B" not "AB". Any ideas?

Answer 1

Use event.stopPropagation() which stops the click event from bubbling to parent element like the following:

 var box = document.querySelectorAll("div"); box.forEach(function(element) { element.onclick = function(event) { event.stopPropagation(); alert(this.innerText); } }); 

 <div style="height: 500px; width: 500px; background: red"> A <div style="height: 200px; width: 200px; background: blue;"> B </div> </div> 

Answer 2

1.solution: You could cancel all other events using event.stopPropagation(); Have a look at the jQuery docs .

event.stopPropagation-Description : Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

 var box = document.querySelectorAll("div"); box.forEach(function(element) { element.onclick = function(event) { event.stopPropagation(); alert(this.innerText); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="height: 500px; width: 500px; background: red"> A <div style="height: 200px; width: 200px; background: blue;"> B </div> </div> 

2. solution: You could of course also use the method to separate the two div elements like this:

 var box = document.querySelectorAll("div"); box.forEach(function(element) { element.onclick = function() { alert(this.innerText); } }); 

 <div style="height: 500px; width: 500px; background: red"> A </div> <div style="height: 200px; width: 200px; background: blue;"> B </div> 

Answer 3

I think this is your need.

 function a(div) { alert(div.innerHTML); } 

 <div style="height: 500px; width: 500px; background: red">A <div style="height: 200px; width: 200px; background: blue;" onclick="a(this);">B</div> </div>