ADDITIONAL KNOWLEDGE

How to stop event propagation with inline onclick attribute?

1–2 minutes

read

stop event propagation

SO we will stop propagation at that point so that click will be performed for one div.

Sample Code-

<!DOCTYPE html>
<html>
<head> 
<title>Check Out Propagation</title>
</head>
<body>








</div>
</div>
<style type="text/css">
 #third{ 
height: 300px; 
width: 300px; 
background-color: black; 
} 
#outer{ 
height: 200px; 
width: 200px; 
background-color: red; 
}
 #inner{ 
height: 100px; 
width: 100px; 
background-color: 
yellow; 
}
</style>
 
function innerFunc(event){ 
event.stopPropagation();
 console.log("inner was cliked"); 
}
 function outerFunc(event){ 
event.stopPropagation(); 
console.log("outer was cliked");
}
 function thirdFunc(event){ 
console.log("third was cliked");
}
 var inner = document.getElementById('inner'); 
inner.addEventListener('click', innerFunc);
 var outer = document.getElementById('outer'); 
outer.addEventListener('click', outerFunc);
var third = document.getElementById('third'); 
third.addEventListener('click', thirdFunc);
function mouseOver(event){ 
console.log("mouse over third"); 
}
 third.addEventListener('mouseover', mouseOver); 

</body></html>
, , , , , ,

2 responses to “How to stop event propagation with inline onclick attribute?”

  1. Manda Tecuanhuey Avatar
    Manda Tecuanhuey

    Hello there! This is my 1st comment here so I just wanted to give a quick shout out and tell you I genuinely enjoy reading your posts. Can you suggest any other blogs/websites/forums that cover the same topics? Thanks!

    Like

    Reply
  2. Alyce Viar Avatar
    Alyce Viar

    Today, I went to the beach front with my children. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!

    Like

    Reply

Leave a comment