場景還原:給a標簽綁定了一個click事件用來觸發ajax請求,在IE6中,請求時常會被中斷,在非IE6中都一切正常。
<a href="javascript:;" id="btn">click me</a> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var url = "http://api.flickr.com/services/" "feeds/photos_public.gne?tags=car&" "tagmode=any&format=json&jsoncallback=?"; $( "#btn" ).click(function(){ $.getJSON( url, function( data ){ alert( data ); }); }); </script>
在IE6中使用Fiddler2監視請求,經常會出現”aborted”,折騰了許久,相當的詭異。後來將a標簽換成button,請求正常,最後經提醒,可能是a標簽的默認事件中斷了請求。但是,在HTML代碼中,已經將a標簽的href設置成了”javascript:;”,通常這樣是可以阻止默認事件了(頁面跳轉)。a標簽的click事件會先執行,然後才執行href的跳轉,如果href是一段javascript語句,這個時候就會執行。IE6在執行href的javascript語句時就中斷了click觸發的ajax請求。使用href=”javascript:;”是為了阻止默認事件,將阻止默認事件的動作移到click事件中就可以解決問題了,這樣就不會執行href中的javascript語句了。
$( "#btn" ).click(function(e){ $.getJSON( url, function( data ){ alert( data ); }); e.preventDefault(); });
注:e.preventDefault(); 這一句的作用就是阻止js中的默認事件。