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

评论
10 views

    曹鹏谈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; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.phpernote.com/js/jquery.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>

    曹鹏谈JQuery中阻止事件冒泡方式及其区别。就谈到这里。想要学习更多关于php的课程，就来良师益友网的曹鹏编辑之邦。