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