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>

jQuery多重事件绑定的更多相关文章

  1. [HTML5]原生事件绑定和jquery动态事件绑定的区别

    原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...

  2. jquery 动态事件绑定(0512)

    jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...

  3. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  4. 对jQuery的事件绑定的一些思考

    jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...

  5. jQuery的事件绑定与触发 - 学习笔记

    jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...

  6. 7 HTML&JS等前端知识系列之jquery的事件绑定

    preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...

  7. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

  8. jQuery的事件绑定命名空间

    jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定.在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间.事实 ...

  9. 前端 -----jQuery的事件绑定和解绑

    11-jQuery的事件绑定和解绑   1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...

随机推荐

  1. 【LG3320】[SDOI2015]寻宝游戏

    [LG3320][SDOI2015]寻宝游戏 题面 洛谷 题解 不需要建虚树的虚树2333... 贪心地想一下,起始节点肯定是在关键点上,访问顺序就是\(dfs\)序. 那么对于每次询问, \[ An ...

  2. CF 1083 C. Max Mex

    C. Max Mex https://codeforces.com/contest/1083/problem/C 题意: 一棵$n$个点的树,每个点上有一个数(每个点的上的数互不相同,而且构成一个0~ ...

  3. Oracle用户和模式，表空间

    oracle 用户与表空间关系 oracle用户与表空间关系用户=商家表=商品表空间=仓库1. 1个商家能有很多商品,1个商品只能属于一个商家2. 1个商品可以放到仓库A,也可以放到仓库B,但不能同时 ...

  4. selenium,unittest——下拉菜单操作，百度账号设置修改

    #encoding=utf-8from selenium import webdriverimport time,unittest, re,sysfrom HTMLTestRunner import ...

  5. iOS开发之多线程技术—GCD篇

    本篇将从四个方面对iOS开发中GCD的使用进行详尽的讲解: 一.什么是GCD 二.我们为什么要用GCD技术 三.在实际开发中如何使用GCD更好的实现我们的需求 一.Synchronous & ...

  6. 4星|《财经》2018年第13期：年轻人大多从大三和大四起开始就从QQ向微信转移

    <财经>2018年第13期 总第530期 旬刊 本期主要话题是快递业,其他我感兴趣的重要话题还有:香港9价HPV疫苗断供风波:华盛顿邮报被贝佐斯收购后这几年的变化:北京二中朝阳学校的划片风 ...

  7. v-for 指令

    JS部分: var app = new Vue({ el: "#app", data() { return { list: [1, 2, 3, 4], objList: [ { i ...

  8. Visual Assist 试用期过期怎么办？

    Visual Assist 试用期过期怎么办 VS这个强大的编译器常常会配置番茄小助手 Visual Assist,但是有时候试用期会过期,又想免费试用,怎么办呢? 有一个方法可以充值番茄助手的试用期 ...

  9. win2003系统网络安装——基于linux+pxe+dhcp+tftp+samba+ris

    原文发表于:2010-09-16 转载至cu于:2012-07-21 一．原理简介 PXE(preboot execute environment)工作于Client/Server的网络模式,支持工作 ...

  10. 袋鼠云旗下新公司云掣科技启航，深耕云MSP业务助推企业数字化转型

    1983年3月15日,国际消费者联盟组织将3月15日确立为国际消费者权益日. 2019年3月15日,袋鼠云举办三周年年会. 一生二,二生三,三生万物.植树节后,万物生长. 年会现场,袋鼠云宣布成立新公 ...