IE event passing event. CancelBubble example introduction

  • 2020-03-30 01:19:59
  • OfStack

Regarding event.cancelbubble, since the objects in HTML are all hierarchical structures, such as a Table containing multiple TR and a TR containing multiple TD
Bubble is an event that can be passed from the child node to the parent node, such as a mouse click on a TD, the current event.srcelement is the TD, but this Bubble mechanism enables you to intercept the click event from TR or Table, but if you event.
Example:
 
<html> 
<body> 
<table border="1" width="26%" id="tableA" onclick="alert('tableA')"> 
<tr onclick="tableA_rowA_click()"> 
<td width="106"> general </td> 
</tr> 
<tr onclick="tableA_rowB_click()"> 
<td width="106"> Blocking message upload </td> 
</tr> 
</table> 
<p> </p> 
</body> 
</html> 
<!-- --> 
<script language="javascript"> 
<!-- 
function tableA_rowA_click(){ 
alert('tableA_rowA'); 
} 
function tableA_rowB_click(){ 
alert('tableA_rowB'); 
event.cancelBubble=true; 
} 
//--> 
</script> 

CancelBubble = event. CancelBubble =true;

Cancel the event bubble, in IE's event mechanism, the trigger event will be from the child element to the parent element to upload level by level, that is, if the child element triggered the click event, then the parent element will also trigger the click event; Event. The cancelBubble = true; Can stop the event continue to upload to add a point, Ie's event passing from the bottom to the top:

Related articles: