例如：document上有A事件，div有B事件，div里面的span有C事件，如果不给span和div加阻止事件冒泡的话，点击span时 就会触发到div的B事件、document的A事件，当点击span时不想触发div和document的事件就要加上阻止事件冒泡，div也是一样的 道理。
JQuery 提供了两种方式来阻止事件冒泡。
方式一：event.stopPropagation();
$("#div1").mousedown(function(event){ event.stopPropagation(); });
方式二：return false;
$("#div1").mousedown(function(event){ return false; });
但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
场景应用： Google 和 百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。
示例测试代码： 当文本输入框获取焦点后，在div1的mousedown事件中采用 event.stopPropagation(); 代码，我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title></title> <script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $("#div1").mousedown(function(event){ //event.stopPropagation(); return false; }); $("#div2").mousedown(function(event){ alert("trigger mousedown event of rootDiv"); }); }); </script> </head> <body> <div id="rootDiv" style="position:relative;left:400px;top:200px;"> <div>1.单击输入框，使输入框获取焦点：</div> <input id="input1" style="width:250px;" type="text"></input> <div id="div2"> <div id="div1" style="width:200px;height:200px;"><br>< br>2.然后再单击这里</div> </div> </div> </body> </html>
转载于:https://www.cnblogs.com/Better-Me/p/4236548.html
