First, let’s look at the JS event model. The JS event model is bubbling upwards. For example, after an onclick event is triggered, the event will follow the node to propagate upwards until a click event is bound to a parent node. If it does not reach the root of the document.
To stop bubbles: 1. stopPropagation() for non-IE browsers. 2. The cancelBubble attribute is true. For IE browser,
Jquery already has a browser-compatible method, event.stopImmediatePropagation();
<!DOCTYPE html><html><head><meta charset="utf-8" /><script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script><title></title></head><style type="text/css">body{background-color:#999999;}#myDiv{background-color:#FFFFF;width:250px;height:250px;display:none; } </style><body><input id="btn" type="button" value="Show DIV" /><div id="myDiv">This is a div;</div></body><script type="text/javascript"> var myDiv = $("#myDiv");$(function (){$("#btn").click(function (event) {showDiv();//Call the display DIV method $(document).one("click", function () {//Bind a shadow Div method $(myDiv).hide();});event.stopPropagation();//Stop the event to bubble up});$(myDiv).click(function (event) {event.stopPropagation();//Stop the event from bubble upward});}); function showDiv() {$(myDiv).fadeIn();}</script>