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. day4 CSS属性操作

    1.CSS属性 基本属性 height, 高度 百分比 width, 宽度 像素,百分比 text-align:ceter, 水平方向居中 line-height, 垂直方向根据标签高度 color. ...

  2. 【LG5018】[NOIP2018pj]对称的二叉树

    [LG5018][NOIP2018pj]对称的二叉树 题面 洛谷 题解 看到这一题全都是用\(O(nlogn)\)的算法过的 考场上写\(O(n)\)算法的我很不开心 然后就发了此篇题解... 首先我 ...

  3. 《Flutter实战》开源电子书

    <Flutter实战>开源电子书 <Flutter实战> 开源了,本书为 Flutter中文网开源电子书项目,本书系统介绍了Flutter技术的各个方面,本书属于原创书籍(并非 ...

  4. 【Jmeter测试】如何使用BeanShell断言判断请求返回的Json相应结果

      脚本结构​上图中,queryMaterialApiDTOListByPkIds是返回Json格式响应结果的请求,然后添加BeanShell断言详细判断Json结果中的值是否正确. Json格式的相 ...

  5. http 502 bad gate way

    世界杯期间,公司的cdn在回源时突然出现大量502. 刚出现问题时,因为考虑到一般502都是上游服务器出现问题,然后因为已经服务了很久都没有出现过这种问题, 就没有仔细考虑,就让回源中心的同事进行排查 ...

  6. PHP学习和使用总结

    起因 学习和使用PHP也有不少年头了,而自己也在学习和使用其他许多语言.我想通过这个总结来给自己一个交代.另一方面也分享一下开发经验,如何用PHP开发和管理大型的项目. 闲聊 许多人说自己1天学会PH ...

  7. US Customs bond DDP 船运

    客户提供目的港门点地址,提供美国进口产品的关税税率基本上就可以了关于ISF信息到时候你发给老外让老外填填好就可以了BAND 货值*0.575%POA  货值*0.335%这二个费用如果国内付就付了,国 ...

  8. rest_framework组件

    认证组件 局部认证 在需要认证的视图类里加上authentication_classes = [认证组件1类名,认证组件2类名....] 示例如下: seralizers.py from rest_f ...

  9. 【探路者】团队互评Alpha版本

    [探路者]组互评连接: 1互评作品:SkyHunter http://www.cnblogs.com/zej87/p/7802000.html 2互评作品:爱阅app http://www.cnblo ...

  10. Beta阶段第二次网络会议

    Beta阶段第二次网络会议 第一次会议问题解决情况 画面问题已经解决,游戏提示信息已加入完成 不同情况下背景已加入完成,但细节部分仍需要进行调整 科技树添加完成,权限修改完成,还存在部分细节调整 AI ...