很多时候我们都想阻止一个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 ;
|
这三个