当前位置: 首页 > 编程笔记 >

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

斜单鹗
2023-03-14
本文向大家介绍jQuery如何防止这种冒泡事件发生,包括了jQuery如何防止这种冒泡事件发生的使用技巧和注意事项,需要的朋友参考一下

冒泡事件就是点击子节点,事件会向上传递,最后触发父节点,祖先节点的点击事件。

html代码部分:


<body>

    <div id="content">

        外层div元素

        <span>内层span元素</span>

        外层div元素

    </div>

    <div id="msg"></div>

</body>

jQuery代码如下:


<script type="text/javascript">

$(function(){

    $('span').bind("click",function(){

        var txt = $('#msg').html() + "<p>内层span元素被点<p/>";

        $('#msg').html(txt);

    });

    $('#content').bind("click",function(){

        var txt = $('#msg').html() + "<p>外层div元素被点击<p/>";

        $('#msg').html(txt);

    });

    $("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').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点击<p/>";

        $('#msg').html(txt);

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

    });

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击<p/>";

        $('#msg').html(txt);

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

    });

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击<p/>";

        $('#msg').html(txt);

    });

})

</script>

        有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证,就不应该跳转。这时候可以通过设置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').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点<p/>";

        $('#msg').html(txt);

        return false;

    });

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点<p/>";

        $('#msg').html(txt);

        return false;

    });

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点<p/>";

        $('#msg').html(txt);

    });

})

</script>

jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。

 类似资料:
  • 本文向大家介绍利用JQuery阻止事件冒泡,包括了利用JQuery阻止事件冒泡的使用技巧和注意事项,需要的朋友参考一下 冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件

  • 本文向大家介绍理解jquery事件冒泡,包括了理解jquery事件冒泡的使用技巧和注意事项,需要的朋友参考一下 一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡。 代码实例如下: 在以上代码中,我们可能只想点击锚点后弹出“我是third”,但

  • 注意 目前仅 Weex Native(Android 和 iOS)支持,web 端 暂时不支持此项特性. 如果你是个 web 开发者,你大概对浏览器事件冒泡机制已经很熟悉了,而且可能认为 Weex 默认会支持事件冒泡。然而,Weex 在 0.13 之前是不支持这一特性的,在 0.13 版本,Weex 提供了这项支持。 概念 以点击事件为例,比如一个点击事件发生在某个 <video> 元素上,这个元

  • 本文向大家介绍jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法,包括了jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法的使用技巧和注意事项,需要的朋友参考一下  首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑)。拿click事件做例子,先附上一段代码: html: script: 这段代码

  • 问题内容: 我有一个复选框,希望对click事件执行一些Ajax操作,但是该复选框也位于容器内,它具有自己的单击行为,当单击该复选框时,我不想运行该行为。此示例说明了我要执行的操作: 但是,我不知道如何在不导致默认点击行为(复选框变为选中/未选中)的情况下停止事件冒泡。 以下两项都停止了事件冒泡,但也没有更改复选框状态: 问题答案: 更换 与 event.stopPropagation() 停止将

  • 原始问题(在CTRL C上向孩子发送SIGTERM,父母应该等待它关闭)。请参阅下面的更新! 我有一个PHP脚本(见下文)启动一个进程并跟踪它的输出。这个过程一直运行,直到我通过按CTRL+C或者向PHP脚本(pid)发送一个SIGTERM信号来请求PHP停止。此时,PHP决定立即终止由proc_open启动的进程,而不是优雅地关闭它,并在关闭自己之前等待它,我该如何实现这一点? 我尝试了一些东西