jQuery中两种阻止事件冒泡的区别
Posted 五谷道场
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中两种阻止事件冒泡的区别相关的知识，希望对你有一定的参考价值。
方式一：event.stopPropagation();
方式二：return false;
但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
例子： 当文本输入框获取焦点后，在div1的mousedown事件中采用 event.stopPropagation(); 代码，我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.12.3.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>
以上是关于jQuery中两种阻止事件冒泡的区别的主要内容，如果未能解决你的问题，请参考以下文章