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

Posted by bower on February 09, 2012
javascript

分享给你的朋友->bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark

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

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

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

有一点要注意

function stop(){

return false;

}

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

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

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

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

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

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

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;

这三个

 

 

分享到:人人网开心网腾讯微博新浪微博豆瓣分享腾讯空间百度搜藏腾讯书签

分享给你的朋友->bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Tags: ,

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word