jQuery多重事件绑定
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多重事件绑定的更多相关文章
- [HTML5]原生事件绑定和jquery动态事件绑定的区别
原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...
- jquery 动态事件绑定(0512)
jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 对jQuery的事件绑定的一些思考
jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...
- jQuery的事件绑定与触发 - 学习笔记
jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
- jQuery的事件绑定命名空间
jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定.在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间.事实 ...
- 前端 -----jQuery的事件绑定和解绑
11-jQuery的事件绑定和解绑 1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...
随机推荐
- Angular ng-include 学习实例
ng-include 可以引入外部的文件到当前视图中.这样可以增强复用性. 最简单的用法 <div ng-include src="'/public/template/tpl.htm ...
- idea 安装后需要手动设置 64位的vmoptions (为了更好的性能和体验)
- SQL数据类型(SQL Server六个类型使用)
SQL数据类型是一个属性,它指定任何对象的数据的类型.在SQL中每一列,变量和表达有相关数据类型. 当创建表时,需要使用这些数据类型. 会选择根据表列要求选择一个特定的数据类型. SQL Server ...
- JavaScript 高级之面向对象
1. 对象属性及方法 创建对象的方式 <script> //创建对象的方式一 var obj = {}; //创建对象的方式一 var obj = new Object(); </s ...
- JVM监控及堆栈内存
jconsole 堆内存:存放new出来的对象 栈内存:存放基本数据结构和对象的引用,但对象本身放在堆中
- 使用Scrapy构建一个网络爬虫
记得n年前项目需要一个灵活的爬虫工具,就组织了一个小团队用Java实现了一个爬虫框架,可以根据目标网站的结构.地址和需要的内容,做简单的配置开发,即可实现特定网站的爬虫功能.因为要考虑到各种特殊情形, ...
- oozie的shell-action中加入hive脚本命令启动执行shell同时操作hive,抛异常Container killed on request. Exit code is 143 Container exited with a non-zero exit code 143
使用oozie来调度操作,用shell的action执行命令,其中shell里包含着hive -e 操作执行时,oozie窗口报 WARN ShellActionExecutor: - SERVER[ ...
- 由A到D中间可不止“B、C”
在电子信息系统的学习中,我们或许早就被告知现实世界是模拟的,而数字化的模拟世界则越来越展现更多的风采.但是所谓的数字和模拟只是相对的而已,你可以把模拟量当做无穷数字量的组合,也可以把数字量当做具有不同 ...
- mysql 多查询临时表的运用
SELECT * from (select count(*) imgCount1 from imagetable where SeriesID = '1201061992020630292018092 ...
- c# 读取blob数据
Stream stream = new MemoryStream(data); BinaryReader r = new BinaryReader(stream); int iRawImageWidt ...