JQuery中阻止事件冒泡方式及其區別 - goody9807－IT工程師數位筆記本

文章出處

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>