JQuery中阻止事件冒泡的两种方式及其区别
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" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>冒泡例子</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").mousedown(function(event){
//event.stopPropagation();//仅仅阻止事件向上传播；
$(this).css('background','blue');
return false;//阻止事件本身的发生；
});
$("#div2").mousedown(function(event){
alert("trigger mousedown event of rootDiv");
});
});
</script>
</head>
<body>
<div >
<div>1.单击输入框，使输入框获取焦点：</div>
<input type="text"></input>
<div >
<div >2.然后再单击这里</div>
</div>
</div>
</body>
</html>