02月09, 2012

由href return false 来看阻止默认事件

很多时候我们都想阻止一个a ?link的href跳转,

<a onclick=”return false;” href=”www.360.cn”>click</a>

以上代码可以达到这个效果

有一点要注意

<script>
function stop(){
    return false;
}
</script>
<a onclick=”stop();” href=”www.360.cn”>click</a></pre>

这么写是不会阻止默认事件的,stop()反回false, ?onclick却没有返回值 只有事件的返回值是false时 才会阻止默认事件 所以要这么写:

<a onclick=”return stop();” href=”www.360.cn”>click</a>

这样就会有效果, 那么如果是用绑定事件的方式呢 会怎么样呢

qwrap是用标准的事件绑定方式来做的 可以用它来测试

<a id=”testa” href=”www.360.cn”>click</a>
<script>
W(‘#testa’).click(function(){ return false;});// 这是一个标准的绑定事件方法
</script>

测试后发现 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() 专门用来阻止默认事件 ,

W(‘#testa’).click(function(e){ e.preventDefault();});

这样就可以成功阻止了.

所以 用addEventListener绑定的事件 必须用preventDefault()来阻止默认事件

但是又有一个现象

$(‘#testa’).click(function(){return false;});

jquery 却可以做到, 以上代码运行成功在所有浏览器

这是为什么 ?这并不是jquery可以例外 只是它悄悄的调用了preventDefault() 和 stopPropagation()

jqeury会把事件的响应函数封装在一个dispach的函数里 如果发现你的函数return false 就会同时调会preventDefault() 和stopPropagation()

所以在jquery中 return false 等价于:

e.preventDefault() 
e.stopPropagation()
return false;

这三个

至于e.preventDefault()e.stopPropagation()的区别 我们下回分解。。

原文请踩http://www.qiongbupa.com/archives/919

本文链接:https://75team.com/post/由href-return-false-来看阻止默认事件.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。