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

如下程序，先执行（123），然后再发生跳转。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <a onclick='ClickOn()' href="http://www.oldboyedu.com">走你</a>
  9.  
  10.     <script>
  11.         function ClickOn(){
  12.             alert(123);
  13.         }
  14.     </script>
  15. </body>
  16. </html>

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <a onclick='return ClickOn()' href="http://www.oldboyedu.com">走你</a>
  9.  
  10.     <script>
  11.         function ClickOn(){
  12.             alert(123);
  13.             return false;
  14.         }
  15.     </script>
  16. </body>
  17. </html>

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <a onclick='return ClickOn()' href="http://www.oldboyedu.com">走你1</a>
  9.     <a id='i1' href="http://www.oldboyedu.com">走你2</a>
  10.     <script src="jquery-1.12.4.js"></script>
  11.     <script>
  12.         function ClickOn(){
  13.             alert(123);
  14.             return false;
  15.         }
  16.         $('#i1').click(function(){
  17.             alert(456);
  18.         })
  19.     </script>
  20. </body>
  21. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <a onclick='return ClickOn()' href="http://www.oldboyedu.com">走你1</a>
  9.     <a id='i1' href="http://www.oldboyedu.com">走你2</a>
  10.     <script src="jquery-1.12.4.js"></script>
  11.     <script>
  12.         function ClickOn(){
  13.             alert(123);
  14.             return false;
  15.         }
  16.         $('#i1').click(function(){
  17.             alert(456);
  18.             return false; //用jQuery阻止后续事件发生的时候，仅此一处加上return就可以了。
  19.         })
  20.     </script>
  21. </body>
  22. </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. 在 Centos7 用Jexus服务器 运行.Net Core 只需几部

    1.安装 .Net SDK 不需要按照 .net core runtime,sdk 依赖于运行时会自动安装 第一步 添加dotnet源 sudo rpm -Uvh https://packages.m ...

  2. MES与ERP的区别（转）

    MES和ERP有很大的不同,主要体现在以下几个方面: 1.管理的目标不同 ERP的重点在于财务,也就是从财务的角度出发来对企业的资源进行计划,相关的模块也是以财务为核心的展开,最终的管理数据也是集中到 ...

  3. ddms+adt+jdk的安装及调试开发安卓

    _______ ddms+adt+jdk的安装及调试开发安卓 目录 阐述 1 1  jdk安装 1 2  sdk安装 3 3  Eclipse安装 6 4  ADT安装 10 5  Ddms使用 16 ...

  4. JavaFX 学习笔记——jfoenix类库学习——raised风格按钮创建

    创建按钮 JFXButton jfxb = new JFXButton("hello"); jfxb.getStyleClass().add("button-raised ...

  5. vs2017搭建linux c++开发环境

    最近一直在阅读ovs的源码,看到用户态代码的时候,需要对用户态的代码进行调试,一开始想直接使用linux中的GDB进行调试,但是ovs的工程太过于复杂,从网上找了些文章,发现vs2017能够支持lin ...

  6. python3【基础】-集合

    集合( set):把不同的元素组成一起形成集合,是python基本的数据类型. 集合元素(set elements):组成集合的成员(不可重复) class set(object) | set() - ...

  7. BZOJ 3489 A simple rmq problem 可持久化KDtree/二维线段树

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3489 题意概述: 给出一个序列,每次询问一个序列区间中仅出现了一次的数字最大是多少,如果 ...

  8. Python中的构造函数

    Python中的构造函数是__init__函数.在Python中,子类如果定义了构造函数,而没有调用父类的,那么Python不会自动调用,也就是说父类的构造函数不会执行. 比如有test.py的mod ...

  9. CS小分队第一阶段冲刺站立会议（5月11日）

    昨日成果:完成了倒计时器的制作,为其添加了声音:并对扫雷游戏的失败添加了动态效果: 遇到的困难:把图片放入picturebox中无法改变图片的大小,音乐格式只能使用.wav,该格式音乐比较大,增加了整 ...

  10. Android开发第二阶段（6）

    今天:对sdcard的操作有了进一步的了解和深入,为程序可以自主扫描并添加sdcard的MP3格式文件 明天:最后的修正.