`
wangyanlong0107
  • 浏览: 499687 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jQuery之防止冒泡事件

 
阅读更多

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

下面是html代码部分：

复制代码
<body>
<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>

<div id="msg"></div>
</body>
复制代码

对应的jQuery代码如下：

复制代码
<script type="text/javascript">
$(function(){
    // 为span元素绑定click事件
    $('span').bind("click",function(){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
        $('#msg').html(txt);// 设置html信息
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>
复制代码

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

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

修改如下：

复制代码
<script type="text/javascript">
$(function(){
       // 为span元素绑定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>
复制代码

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

 

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

下面是案例：

复制代码
<script type="text/javascript">
$(function(){
   $("#sub").bind("click",function(event){
         var username = $("#username").val();  //获取元素的值，val() 方法返回或设置被选元素的值。
         if(username==""){     //判断值是否为空
             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
             event.preventDefault();  //阻止默认行为 ( 表单提交 )
         }
   })
})
</script>
复制代码

html部分：

复制代码
<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>

<div id="msg"></div>
</body>
复制代码

还有一种防止默认行为的方法就是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来处理。

复制代码
<script type="text/javascript">
$(function(){
       // 为span元素绑定click事件
    $('span').bind("click",function(event){
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 为div元素绑定click事件
    $('#content').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
        return false;
    });
    // 为body元素绑定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>
 
 
 
 

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>

 
 
分享到：
| 【转】解析Javascript事件冒泡机制
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery阻止事件冒泡

    jQuery库提供了方便的方式来处理DOM事件，包括阻止事件冒泡的功能。这个功能在构建交互式网页时非常有用，可以避免不必要的事件处理或者防止多次执行相同的操作。 jQuery中的`event.stopPropagation()`方法是阻止...

    jquery阻止冒泡实例

    jquery阻止冒泡的所有方法，适合初学jquery者，是一篇很好的学习文稿

    js阻止冒泡及jquery阻止事件冒泡示例介绍.docx

    // 不仅阻止冒泡，也阻止了事件本身 }); }); &lt;div id="ee"&gt;aaaaa &lt;a href="baidu.com"&gt;baidu.com&lt;/a&gt; ``` 在这个例子中，点击按钮时会触发多个事件处理函数，但通过使用`event.stopPropagation();`和`...

    jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片

    在本文中，我们将深入探讨如何使用jQuery的hover事件来创建一个独特的心形图片墙，当鼠标悬浮在图片上时，会产生动态效果。首先，我们需要理解jQuery库的基本概念以及hover事件的工作原理。 jQuery是一个广泛使用的...

    深入理解jQuery之防止冒泡事件

    使用jQuery时，`stopPropagation`方法用于阻止事件冒泡，而`preventDefault`方法用于阻止事件的默认行为。两者都是通过事件对象访问，并在合适的时机调用以实现特定的目的。除此之外，返回`false`在事件处理函数中...

    jQuery中阻止冒泡事件的方法介绍

    总的来说，阻止冒泡在某些场景下是必要的，比如避免重复处理、防止父元素的处理函数干扰子元素的操作，或者在事件委托中只对特定源元素做出响应。了解并熟练掌握这些方法，可以帮助我们编写更高效、更可控的jQuery...

    利用JQuery阻止事件冒泡

    除了使用event对象的方法外，JQuery的事件处理函数还提供了一个简写形式来阻止冒泡，即直接在事件处理函数的末尾返回false。这等同于调用了event.stopPropagation()和event.preventDefault()。例如： ```javascript...

    事件冒泡是什么如何用jquery阻止事件冒泡

    2. 阻止事件冒泡的方法：在实际的开发中，我们经常需要阻止事件冒泡以防止事件被不相关的父级元素捕获。在jQuery中，可以通过几种方式来阻止事件冒泡。 - 使用返回false的方式：在事件处理函数中直接返回false，这...

    jquery图片冒泡提示效果

    总结来说，jQuery图片冒泡提示效果是通过jQuery库实现的一种增强用户体验的交互设计，通过监听鼠标事件、动态创建和定位提示框、应用动画效果，为用户提供直观的信息展示，提升了网页的视觉吸引力和可用性。...

    JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery 提供了两种方式来阻止事件冒泡。 方式一：event.stopPropagation(); 代码如下: $(“#div1”).mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; 代码如下: $(“#div1”)....

    jquery阻止冒泡事件使用模拟事件

    如果`myclick`事件没有被正确地阻止冒泡，它可能还会传播到更上层的元素上，导致不必要的副作用。因此，合理地使用`e.stopPropagation()`和`e.preventDefault()`（用于阻止默认动作）是处理复杂交互逻辑中非常重要的...

    jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    综上所述，jQuery事件处理机制中的绑定和解绑、事件冒泡与阻止事件冒泡是前端开发中非常重要的知识点。在实际开发过程中，灵活运用这些技术可以实现更加丰富的交互效果，并提升用户体验。通过上述实例的介绍和分析，...

    jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

    // 只阻止默认行为，不阻止冒泡 e.preventDefault(); }); ``` 3. 使用`event.stopPropagation()`：此方法用于阻止事件向上冒泡到父元素，但不会影响默认行为。例如： ```javascript $('#btn').click(function...

    js阻止冒泡及jquery阻止事件冒泡示例介绍

    标题中提到的“js阻止冒泡及jquery阻止事件冒泡示例介绍”涉及JavaScript和JQuery两种技术在事件处理中阻止事件冒泡的概念。冒泡是指当一个元素上触发了某个事件（如点击），这个事件不仅会在该元素上进行处理，还会...

    JQuery 提供了两种方式来阻止事件冒泡.rar

    除了这两种阻止事件冒泡的方法，JQuery还提供了`event.preventDefault()`，这个方法并不阻止事件冒泡，而是阻止了事件的默认行为。例如，点击链接默认会跳转到新的URL，但如果在事件处理程序中调用了`event....

    jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理

    当`stopPropagation`被调用时，如果原生事件对象有`stopPropagation`方法，那么就调用它，从而阻止冒泡。需要注意的是，`stopPropagation`作用于当前处理事件的元素，而不是事件的源头。 接下来，我们讨论如何主动...

Magicbox
Global site tag (gtag.js) - Google Analytics