"javascript:void(0);"是個好選擇嗎?

IE對GIF動畫的一個BUG中,提到了由於onbeforeunload事件形成瀏覽器進行中的請求被掛斷的問題,這篇算是一個擴展。javascript

在網頁中咱們經常使用<a href="javascript:void(0);"> ... </a>(包括其變種如javascript:等)來作一個「不會跳轉」的超連接,而這個a標籤一般會長得像一個按鈕,或者充當了按鈕的功能。前端

先拋開BUG不說,從語義上講,a標籤來作按鈕是不合適的。但這麼作實際上是處於歷史緣由:在IE6或更古董的瀏覽器中,:hover等普遍應用的僞類只對a標籤生效。懸浮態、點擊態對於按鈕來講是很是重要的,但若是用JS來實現這事就有點蛋B,殺雞用牛刀了,因而爲了圖便宜,你們都採用a加上各類樣式來充當按鈕功能。java

時間一長,按鈕的點擊不少不會是頁面跳轉了,而是頁面內交互。這時候問題來了:a標籤一點擊,頁面跳走了,沒得玩兒了。因而強需求「不會跳轉的a標籤」,使用事件機制阻止瀏覽器默認行爲固然是很好的,可是畢竟要手工操做,容易漏,再加上前端捉襟見肘的代碼量,彷佛這種正經方法不怎麼遭人待見。瀏覽器

結果容易的方法固然仍是被人找出來了,起先是onclick="return false;",沒啥問題,可咱不是不提倡寫內聯事件綁定麼?因而有了href="#",時間一長,發現hash是頗有用的,好比能夠用來作歷史記錄,固然還有它原本的頁面定位的做用,並且這容易形成頁面跳到最頂上去,因而這樣的a標籤雖然不會跳轉頁面,但實際上是有破壞性的。後來不知道是誰發明了本文的豬腳:javascript:void(0);可謂驚爲天人,後續爲了省幾個字符所擴展的都算不上啥,因爲其較小的破壞性和很是便捷的用法,一度成爲比較公認的最佳實踐。動畫

基本上來講這沒太大問題,缺點就是由於javascript:這個protocol是會觸發onbeforeunload事件,從而引起一連串沒必要要的麻煩。 那麼,哪裏才能買獲得呢怎麼纔是真正的最佳實踐呢?.net

我以爲有三種選擇:代理

  1. 只要是不跳走的,就堅定不用a標籤作按鈕,而後讓IE6玩兒蛋去。
  2. 保證對每一個按鈕性質的a標籤都阻止瀏覽器默認事件行爲。
  3. 用事件代理,在body上捕獲全部a標籤的點擊事件,判斷其href並阻止瀏覽器默認行爲。

2麻煩 3可能受阻止冒泡的影響 教練,我想選1code

轉載自:http://jimliu.net/2013/04/13/javascriptvoid0%E6%98%AF%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E5%90%97%EF%BC%9F/事件

相關文章
相關標籤/搜索