討論：A標(biāo)簽要不要避免使用 javascript:void(0)

sshe 發(fā)布于2019-08-01 15:20 / 3422人閱讀

摘要：某天討論了要不要避免標(biāo)簽加，最后還是決定加甲在某些里是。鼠標(biāo)在單擊中鍵時(shí)會(huì)新建瀏覽器標(biāo)簽頁(yè)打開(kāi)這個(gè)鏈接，這會(huì)誤導(dǎo)用戶。甲乙標(biāo)簽要有屬性，不然沒(méi)有也不會(huì)有默認(rèn)的樣式，這樣就得用模擬。最保險(xiǎn)穩(wěn)妥的還是在標(biāo)簽中加，附上。

甲是我的同事，乙是我。
某天討論了要不要避免 a 標(biāo)簽加 javascript: void(0)，最后還是決定加！

甲：

在某些IE里是bug。
使用更好，這樣頁(yè)面還不會(huì)跳轉(zhuǎn)到最頂端

乙：

使用有個(gè)問(wèn)題，點(diǎn)擊后 windows.location 變了。這個(gè)被記錄到瀏覽器的 history 了，這樣不利于瀏覽器后退前進(jìn)操作。

還有在 IE 下可能會(huì)在點(diǎn)擊后出現(xiàn)虛線外框，這個(gè)樣式很難看, 且沒(méi)法修改。

鼠標(biāo)在單擊中鍵時(shí)會(huì)新建瀏覽器標(biāo)簽頁(yè)打開(kāi)這個(gè)鏈接，這會(huì)誤導(dǎo)用戶。

另外，會(huì)讓瀏覽器腳本解析文檔搜索 nogo 錨點(diǎn)，這個(gè)影響雖小，但也不可取。

暫時(shí)沒(méi)有非常完美的方案代替 javascript:void(0);

網(wǎng)上有些人是寫(xiě)一個(gè) 類然后用 $(".cancel_link").click(function(){}); 之類的腳本代替。

甲：

還有就是必須用標(biāo)簽么？ span 不行么

http://stackoverflow.com/questions/134845/href-tag-for-javascript-links-or-javascriptvoid0

乙：

只有 a 標(biāo)簽有默認(rèn)的 :hover 屬性

如果用 span 或 div 代替，就得用 js 模擬 hover，比如增加一個(gè) hover 類： span.hover{}

也有人建議用 button 代替 a。但 button 在某些平臺(tái)的樣式?jīng)]法調(diào)整。

甲：

Simple code example

Your HTML:

Cancel this action

Your CSS:

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

Your JavaScript:

// Cancel click event
$(".cancel-action").click(function(){
});
// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on("hover","a",function(){
    $(this).toggleClass("hover");
});

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

乙：

a 標(biāo)簽要有 href 屬性，不然沒(méi)有 hover 也不會(huì)有默認(rèn)的 cursor:pointer 樣式，這樣就得用 js 模擬。
也許 js 模擬還未生效，用戶已經(jīng)點(diǎn)擊了鏈接，這樣體驗(yàn)會(huì)蠻差的。
鏈接文本  這樣的標(biāo)簽?zāi)J(rèn)是沒(méi)有 link 樣式，在 rss 中輸出或其他沒(méi)有 .cancel_link 樣式的地方都是顯示成文本狀態(tài)，沒(méi)人知道這個(gè)是可點(diǎn)擊的鏈接。
最保險(xiǎn)穩(wěn)妥的還是在 a 標(biāo)簽中加 href ，附上 js 。只不過(guò)會(huì)顯得有點(diǎn)不夠清潔。

原文鏈接：http://zaishanda.com/post/4