jQuery阻止事件冒泡的例子

最新推荐文章于 2024-11-07 13:38:59 发布

dengdao2427

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量118

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zhouzhilong/p/4644963.html

版权

下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子，我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解，下面整理了更详细的方法，有兴趣的朋友可进入参考。

jQuery.Event提供了一个非常简单的方法来阻止事件冒泡：event.stopPropagation();

代码如下	复制代码
$("p").click(function(event){ event.stopPropagation(); // do something })

但是这个方法对使用live 绑定的事件没有作用，需要一个更简单的方法阻止事件冒泡：return false;

代码如下	复制代码
$("p").live("click", function(){ $(this).after("Another paragraph!"); 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.111cn.net /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;"><br>< br>2.然后再单击这里</div>
        </div>
    </div>
</body>
</html>

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

下面是html代码部分：

代码如下

复制代码

<body>
<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>

对应的jQuery代码如下：

代码如下

复制代码

当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。

如何防止这种冒泡事件发生呢？

修改如下：

代码如下

复制代码

event.stopPropagation(); // 阻止事件冒泡

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

下面是案例：

代码如下

复制代码

html部分：

还有一种防止默认行为的方法就是return false。效果一样。

代码如下：

代码如下	复制代码
<script type="text/javascript"> $(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 return false; } }) }) </script>

同理，上面的冒泡事件也可以通过return false来处理。

代码如下

复制代码

由此可以看出：

1.event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
2.returnfalse;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
还有一种有冒泡有关的：
3.event.preventDefault();
如果把它放在头部A标签的click事件中，点击“点击我”。
会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

转载于:https://www.cnblogs.com/zhouzhilong/p/4644963.html