event.stopPropogation not working as expected

Question

I know event.stopPropogation() is used to stop event bubbling i.e. it will stop firing parent events but in my this code it's not working. Can you please check this:

<div onClick="diva();">
div
<p onClick="pa();">
ppp
<a onClick="aa();">
  hello
</a>
</p>
</div>


<script type="text/javascript">

function diva(){
alert('div')
}

function pa(){
alert('p')
}

function aa(event){
    event.stopPropogation();
    alert('a')

}
</script>

It's alerting P and Div while it should just alert a.

Answer 1

Your event is undefined .Pass event as follows :

<a onclick="aa(event);">

function diva(){
console.log('div')
}

function pa(){
console.log('p')
}

function aa(event){
 event.stopPropagation();
    console.log('a')

}

<div onclick="diva();">
div
<p onclick="pa();">
p
<a onclick="aa(event);">
  hello
</a>
</p>
</div>