首頁 > 網頁教程 > JavaScript > a標簽中關于javascript:void(0)的幾個問題

a標簽中關于javascript:void(0)的幾個問題

時間:2013-08-23    來源:楚廣明的博客

最近看了好幾個關于<a>標簽和javascript:void(0)的帖子,謹記于此,以資查閱。注:以下代碼未經全面測試,但每一種方法可能會出現的情況都基本做了說明。 

在做頁面時,如果想做一個鏈接點擊后不做任何事情,或者響應點擊而完成其他事情,可以設置其屬性 href = "#",但是,這樣會有一個問題,就是當頁面有滾動條時,點擊后會返回到頁面頂端,用戶體驗不好。 

目前有如下幾種解決辦法: 

1)點擊鏈接后不做任何事情 

  1. 1.<a href="javascript:void(0);" >test</a>   
  2. 2.<a href="javascript:;" >test</a>   
  3. 3.<a href="####" >test</a> //使用2個到4個#,見的大多是"####",也有使用"#all"等其他的

2)點擊鏈接后,響應用戶自定義的點擊事件 

  1. 1.<a href="javascript:void(0)" onclick="doSomething()">test</a>   
  2. 2.<a href="#" onclick="doSomething();return false;">什么問題都解決了,包括瀏覽器不兼容問題</a> //或者直接使用href=""   
  3. 3.<a href="#" onclick="alert();event.returnValue=false;">test</a>

說明: 

1.javascript:void(0)這種偽協議,少寫的好,如果你看過一些web標準的書就知道為什么了。(不懂,原話摘的,暫做記錄) 

2.鏈接(href)直接使用javascript:void(0)在IE中可能會引起一些問題,比如:造成gif動畫停止播放等,所以,最安全的辦法還是使用“####”。為防止點擊鏈接后跳轉到頁首,onclick事件return false即可。 

3.如果僅僅是想鼠標移過,變成手形,可以使用 

<span style="cursor:pointer" onclick="foo()">Click Me!</span>   

void是javascript的操作符,意思是:只執行表達式,但沒有返回值, 
void 操作符用法格式如下: 

  1. 1. javascript:void (expression)   
  2. 2. javascript:void expression   

為了程序風格良好,建議使用第二種帶上括號的

我們可以使用void操作符指定超級鏈接,如javascript:void(document.form.submit())。表達式會被計算但是不會在當前文檔處裝入任何內容,void(0)計算為0,但在JavaScript上沒有任何效果,也就是說 <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一樣的。 
關鍵是只要知道void是javascipt自身的操作符,它表示的是只執行表達式,但沒有返回值! 

另外頁面會自動調回頂端,是因為"#"默認的瞄點位置是top,所以會出現這種情況。 

相關推薦
在JavaScript編程中如何對if語句進行優化
9條JavaScript編程最佳實戰技巧
JavaScript編程中的for與in循環的用法實例
用JS代碼簡單實現checkbox的全選與反選
如何處理JS的'null'為空或不是對象
用javascript代碼實現對瀏覽器判斷的思路
25款有趣好玩的JavaScript小游戲
JS代碼的window.location屬性詳解
用javascript把XML解析為JSON的方法
用Js操作Cookie的代碼教程附有詳細注釋
JS教程:NodeList集合跟Array數組的區別
深入理解JavaScript的caller,callee,call,apply函數
獲取Javscript執行函數名稱的代碼實例
JavaScript的split函數詳解及代碼實例
新手教程:107條Javascript的常用語句
js禁用下拉框的代碼實例
js編程經驗分享 原始Ajax與jQuery中的Ajax比較
Javascript新手教程:從入門到精通(完整版)
10款基于Javascript的超酷繪畫和畫布類庫
網頁制作web開發中常用的javascript表單驗證函數分享
jquery教程:10條建議讓你編寫的jquery代碼運行速度更快
jQuery教程:10個技巧讓你也能寫出卓越的jQuery插件
jQuery新手教程:12個jQuery編程常用技巧分享
JavaScript技巧:圖片列表的寬度自適應解決辦法
JavaScript解析如何讓搜索引擎看到更真實的網頁?
超實用:正則表達式30分鐘入門教程分享
JS新手教程:數學函數sqrt求平方根函數的代碼分享
JavaScript教程:適合新手的js代碼使用方法和技巧大全
用JavaScript處理JSON數據的代碼實例
在JavaScript中將JSON的字符串解析成JSON數據格式的兩種方法
JavaScript如何處理解析JSON數據詳解
JavaScript新手教程之JSON的使用全解(超詳細)
jQuery教程:10個很實用的jQuery表單操作代碼片段分享
JS根據userAgent值來判斷瀏覽器的類型及版本
JavaScript判斷智能手機瀏覽器的代碼片段分享
Javascript教程:js異步編程的4種方法詳述

精彩推薦

熱門教程

重庆时时开奖直播app 捕鱼达人单机版全免费 怎样用视频赚钱 湖南幸运赛车网站 广西11选5开奖记录 nba雪缘园 奔驰宝马电玩城破解版 福建体彩31选7走势图? 我想要个赚钱的方式 亲朋手游大厅完整版 两新赚钱党建党建人民网 不赚钱的项目客户怎认为价格太高 广西11选5 河北快3 江苏时时彩官网 l烧烤冷饮点赚钱吗 六福彩票网址