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. [POI2011]MET-Meteors

    题面 题解 首先我们尝试暴力,那么就对每个点二分一下即可. 我们发现单独二分复杂度太高,而且有些地方很浪费,如求前缀和等. 那么我们就想,能否将它们合并在一起二分呢? 于是就有了整体二分 整体二分即可 ...

  2. 存一下emacs配置

    (global-set-key [f9] 'compile-file)(global-set-key [f10] 'gud-gdb)(global-set-key (kbd "C-z&quo ...

  3. 【转】bash: ssh: command not found解决方法(linux)

    原文转自:http://www.cnblogs.com/ahauzyy/archive/2013/04/25/3043699.html 今天在搭建hadoop的开发环境中,用的是centsos6.0的 ...

  4. vue cli 3 +jquery

    const webpack = require('webpack')module.exports = { // baseUrl type:{string} default:'/' // 将部署应用程序 ...

  5. 广东ACM省赛 E题

    题意: 输入一个P 使得存在一个一个N大于等于P, 并且存在m 等于 m/n * (m-1)/(n-1)=1/2. 思路 此题可以利用佩尔方程求解, 也可以打表解决.本次我解决利用的是佩尔方程(其实也 ...

  6. win7重装系统后设置Python2.7环境

    起因 台式机的主板莫名出现问题,显示器画面卡顿不能动,鼠标键盘无反应,在这种情况下只好按住电源键断电.下面重启后,显示器无画面,猜测开机后没有进BIOS.然后就拆机箱,拔下电源线后撬起主板电池几秒再放 ...

  7. leetcode个人题解——#33 Search in Rotated Sorted Array

    思路:每次取中间元素,一定有一半有序,另一半部分有序,有序的部分进行二分查找,部分有序的部分递归继续处理. class Solution { public: ; int middleSearch(in ...

  8. Your funds transfer has been delayed

    Hello from Amazon. Your funds transfer in the amount of 9,422.88 USD has been delayed because the cr ...

  9. DOM实战

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 视频来源:https://www.bil ...

  10. 寻找bug

    bug1:void不应有返回值. bug2:while(n--)没有条件终止循环. bug3:size和data没有定义 bug4:arr 是sz 在大于0的情况下创建的 一定部位bull   下面的 ...