JQuery中阻止事件冒泡方式及其区别

ゝ一世哀愁。 2022-07-15 00:44 152阅读 0赞

转载自：http://blog.csdn.net/jeamking/article/details/5332328

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;background-color:red;"><br><br>2.然后再单击这里</div>  
        </div>  
    </div>  
</body>  
</html>