zoukankan      html  css  js  c++  java
  • 阻止事件冒泡js 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元素绑定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(); // 阻止事件冒泡

     

    有时候点击提交button会有一些默认事件。比方跳转到别的界面。可是假设没有通过验证的话,就不应该跳转。这时候能够通过设置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>
  • 相关阅读:
    腾讯云环境配置之PHP5.6.3 + redis扩展 稳定版
    越狱后的ios如何用apt-get 安装各种命令
    批量 kill mysql 中运行时间长的sql
    谷歌Chrome浏览器开发者工具的基础功能
    话说好像是这样,ios下面通常用iframe来打开你的scheme地址; Android下通常用location.href来。。。 不过实际情况好像比这个复杂得多。。
    js判断移动端是否安装某款app的多种方法
    设计不错的网站
    BADIP filter
    开窗函数 函数() OVER()
    2018年1月初的一次面试题
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/7093385.html
Copyright © 2011-2022 走看看