zoukankan      html  css  js  c++  java
  • jQuery多重事件绑定

    1. <a> a标签默认绑定了一个onclick事件,当自己再写一个onclick事件的时候,默认自己写的那个优先执行。

    如下程序,先执行(123),然后再发生跳转。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a onclick='ClickOn()' href="http://www.oldboyedu.com">走你</a>
    
        <script>
            function ClickOn(){
                alert(123);
            }
        </script>
    </body>
    </html>
    

     2.如果只想让它执行第一步onclick的时候,可以return 一个false回来。

    先在此处 onclick='return ClickOn()' 加上return, 再加上return false。。如下黄色标识的2处都需要加上return。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a onclick='return ClickOn()' href="http://www.oldboyedu.com">走你</a>
    
        <script>
            function ClickOn(){
                alert(123);
                return false;
            }
        </script>
    </body>
    </html>
    

     效果,只会弹出123,但不会发生跳转。

    如果是return true的话,则2个都会执行。

    3. jquery的绑定方式如下:默认先弹出456,再发生跳转。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a onclick='return ClickOn()' href="http://www.oldboyedu.com">走你1</a>
        <a id='i1' href="http://www.oldboyedu.com">走你2</a>
        <script src="jquery-1.12.4.js"></script>
        <script>
            function ClickOn(){
                alert(123);
                return false;
            }
            $('#i1').click(function(){
                alert(456);
            })
        </script>
    </body>
    </html>
    

    用jQuery阻止后续事件的发生,加上只需要加上return false就可以了。在onclick处不需要加上return。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a onclick='return ClickOn()' href="http://www.oldboyedu.com">走你1</a>
        <a id='i1' href="http://www.oldboyedu.com">走你2</a>
        <script src="jquery-1.12.4.js"></script>
        <script>
            function ClickOn(){
                alert(123);
                return false;
            }
            $('#i1').click(function(){
                alert(456);
                return false; //用jQuery阻止后续事件发生的时候,仅此一处加上return就可以了。
            })
        </script>
    </body>
    </html>
    
  • 相关阅读:
    JS中利用正则表达式提取一个字符串中的子字符串的方法
    Xcode的环境变量列表
    在未安装Visual Studio 2012的服务器上使用MSBuild以文件系统方式发布ASP.NET MVC系统
    使Web API支持二级实体操作,兼对RESTFul风格API设计的疑惑。
    忽略大小写的字符串包含测试
    Entity Framework里不用查询直接更新的办法
    iOS里生成灰化(黑白)图像
    微信小程序开发调试工具
    微信小程序产品定位及功能介绍
    微信小程序DEMO初体验
  • 原文地址:https://www.cnblogs.com/momo8238/p/7469834.html
Copyright © 2011-2022 走看看