由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 ;

這三個