由href return false 来看阻止默认事件
很多时候我们都想阻止一个a ?link的href跳转。
1
|
<a onclick=” return false ;” href=”www. 360 .cn”>click</a> |
以上代码可以达到这个效果
有一点要注意
1
2
3
4
5
6
7
|
function stop(){ return false ; } <a onclick=”stop();” href=”www. 360 .cn”>click</a> |
这么写是不会阻止默认事件的,stop()反回false, ?onclick却没有返回值 只有事件的返回值是false时 才会阻止默认事件 所以要这么写:
1
|
<a onclick=” return stop();” href=”www. 360 .cn”>click</a> |
这样就会有效果, 那么如果是用绑定事件的方式呢 会怎么样呢
qwrap是用标准的事件绑定方式来做的 可以用它来测试
1
2
3
|
<a id=”testa” href=”www. 360 .cn”>click</a> W(‘#testa’).click( function (){ return false ;}); // 这是一个标准的绑定事件方法 |
测试后发现 ie是可以阻止默认事件的 ?标准浏览器 chrome firefox等却没有能阻止 直接发生了跳转
分析后发现因为标准浏览器使用 addEventListener 绑定事件 而该方法是没有返回值的,可参见w3c文档 没有返回值, 返回值当然不会是false所以继续执行href 。
而ie使用attachEvent的方法这个方法是有returnValue的参见?http://msdn.microsoft.com/en-us/library/ie/aa703898(v=vs.85).aspx
所以成功阻止了默认事件,
那么使用addEventListener绑定事件 如何阻止呢 ?
虽然addEventListener 不能有返回值 但是它有一个方法 preventDefault() 专门用来阻止默认事件 ,
1
|
W(‘#testa’).click( function (e){ e.preventDefault();}); |
这样就可以成功阻止了.
所以 用addEventListener绑定的事件 必须用preventDefault()来阻止默认事件
但是又有一个现象
1
|
$(‘#testa’).click( function (){ return false ;}); |
query 却可以做到, 以上代码运行成功在所有浏览器
这是为什么 ?这并不是jquery可以例外 只是它悄悄的调用了preventDefault() 和 stopPropagation()
jqeury会把事件的响应函数封装在一个dispach的函数里 如果发现你的函数return false 就会同时调会preventDefault() 和stopPropagation()
所以在jquery中 return false 等价于:
1
2
3
4
5
|
e.preventDefault() e.stopPropagation() return false ; |
这三个
由href return false 来看阻止默认事件的更多相关文章
- JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题
return false 在jQuery中,我们常用return false来阻止浏览器的默认行为,那"return false"到底做了什么? 当你每次调用"retur ...
- JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件
(一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- js为链接绑定点击事件并且附带return false;来阻止跳转
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title& ...
- js阻止默认事件,如a标签跳转和事件冒泡
禁止a标签点击跳转 <a href="http://baidu.com" onclick="return false">点我啊</a> ...
- (O)阻止默认事件和阻止冒泡的应用场景
场景1:阻止默认事件 比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为, 所以需要在点击取消的时候 阻止冒泡,防止其跳转. <a id='ca ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
随机推荐
- TTL电平与RS232电平的区别
TTL电平与RS232电平的区别 工作中遇到一个关于电平选择的问题,居然给忘记RS232电平的定义了,当时无法反应上来,回来之后查找资料才了解两者之间的区别,视乎两年多的时间,之前非常熟悉的一些常 ...
- Mirantis OpenStack HA
Mysql使用Galera做Active/Active集群,同时使用Pacemaker,因为Galera mysql用到了领导机选举机制quorum,所以控制节点至少三个 RabbitMQ使用mirr ...
- __autoload函数
./index.php----------------------------------------------------------------------------------<?ph ...
- 同步fifo的verilogHDL设计实例
原创 设计一个fifo,输入16bit,输出16bit的data,寻址宽度5bit,有空满标志. top 层如下所示: /* date : 2014/10/14 version : modelsim ...
- 180China丨the Agency for Brand Engagement and Experience
180China丨the Agency for Brand Engagement and Experience Welcome to 180. Welcome to Creativity. Thank ...
- Codeforces 435B. Pasha Maximizes
简单贪心.... B. Pasha Maximizes time limit per test 1 second memory limit per test 256 megabytes input s ...
- 怎样删除在Github中创建的项目
像我这种刚開始学习的人总会不可避免的创建了一些測试性的项目.随后自然就是要删除了.那么该怎样删除呢? 你此刻可能处于这个界面: 也可能处于这个界面: 假设是第一个界面直接点击右側的"Sett ...
- android使用自己定义属性AttributeSet
这里为了演示使用自己定义变量,字体大小改用自己定义的属性. 首先要创建变量,创建了个values/attrs.xml文件,文件名称随意,可是要在values文件夹下: <?xml version ...
- 我的Python成长之路---第一天---Python基础(3)---2015年12月26日(雾霾)
四.变量和常量 变量是用来存储程序运行期间需要临时保存可以不断改变的数据的标识符.Python有自身的内存回收机制,所以在开发过程中不用考虑变量的销毁等 Python中的变量名命名有如下规则: 1.变 ...
- 06-IOSCore - KVC、CoreData
一. KVC 1. KVC 使用前:黯淡无光 if ([keyPath isEqualToString:@"name"]) { self.labelName.text = self ...