JS Bubbling event Pee

What is a bubbling event? Simply put, the event is like a bubble in the water, triggering the current object and then triggering its parent element, then the parent element ...

eg

<div class= "Out" onclick= "alert (' Out ')" >
<div class= "Middle" onclick= "alert (' Middle ')" >
<input class= "inner" type= "button" onclick= "alert (' inner ')"/>
</div>
</div>

Click button, pop-up inner, middle, out.

Which element is terminated?

From the current element step up, some browsers end in document, there are window.

How do I block bubbling events?

<div class= "Out" onclick= "alert (' Out ')" >
<div class= "Middle" onclick= "alert (' Middle ')" >
<input class= "inner" type= "button" onclick= "alert (' inner ')"/>
</div>
</div>

<script>

function A (event) {
Alert ("inner");

Compatible with IE
Event.stoppropagation? Event.stoppropagation ():(event.cancelbubble= true);
}

</script>

This will only eject the inner

Note: Someone on the net said return false; and Event.preventdefault () can also prevent bubbling, pro-test, invalid ...

JS Bubbling event Pee