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. CF 547 D. Mike and Fish

    D. Mike and Fish http://codeforces.com/contest/547/problem/D 题意: 给定平面上n个点,将这些点染成红或者蓝色,要求每行.每列红色点与蓝色点 ...

  2. MySQL入门篇（七）之Xtrabackup备份与恢复

    一.Xtrabackup介绍 MySQL冷备.mysqldump.MySQL热拷贝都无法实现对数据库进行增量备份.在实际生产环境中增量备份是非常实用的,如果数据大于50G或100G,存储空间足够的情况 ...

  3. 洛谷 P1941 飞扬的小鸟

    洛谷 P1941 飞扬的小鸟 原题链接 首先吐槽几句 noip都快到了,我还不刷起联赛大水题! 题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节 ...

  4. cookie和session在Django中的应用

    1 会话跟踪技术 什么是会话跟踪 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而1008 ...

  5. python开源IP代理池--IPProxys

    今天博客开始继续更新,谢谢大家对我的关注和支持.这几天一直是在写一个ip代理池的开源项目.通过前几篇的博客,我们可以了解到突破反爬虫机制的一个重要举措就是代理ip.拥有庞大稳定的ip代理,在爬虫工作中 ...

  6. 搜索引擎ElasticSearch系列（五）： ElasticSearch2.4.4 IK中文分词器插件安装

    一:IK分词器简介  IK Analyzer是一个开源的,基于java语言开发的轻量级的中文分词工具包.从2006年12月推出1.0版开始, IKAnalyzer已经推出了4个大版本.最初,它是以开源 ...

  7. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

  8. RedHat yum源配置

    RedHat yum源配置 原本以为Redhat7 和Centos7是完全一样的,可是安装完Redhat7以后,使用yum安装软件,提示红帽操作系统未注册.在网上搜索教程,最后成功解决,解决方式是将y ...

  9. Adobe InDesign CS6自学入门到高级视频教程

    关键字:Adobe InDesign 视频教程 点击获取视频教程 教程目录 第1章/1.卸载InDesign CS6.avi 第1章/2.安装InDesign CS6.avi 第2章/1.创建并编辑自 ...

  10. pyextend库-accepts函数参数检查

    pyextend - python extend lib accepts(exception=TypeError, **types) 参数: exception: 检查失败时的抛出异常类型 **typ ...