單擊鏈接時執行JavaScript

Question

哪個更好，假設我們不關心沒有啟用JavaScript的人？

<a href="#" onclick="executeSomething(); return false"></a>

要么

<a href="javascript:executeSomething()"></a>

有什么區別嗎？

或者除了使用JavaScript庫將事件附加到錨元素之外還有其他任何方法嗎？

Answer 1

關於onclick的好處是你可以通過javascript禁用優雅地處理瀏覽器。

例如，無論是否在瀏覽器中啟用了javascript，下面的照片鏈接都會有效：

<a href="http://www.example.com/myPhoto.jpg" target="_blank" onclick="showPhoto(this.href); return false;">foobar</a>

Answer 2

最好使用onclick因為這就是事情的方式。

javascript:是一種模仿onclick的hackish方式。

另外，我建議你盡可能地做一些非侵入性的Javascript，它使代碼更容易閱讀和更易於 維護 ！

Answer 3

href="#"有許多不良副作用，例如在瀏覽器頁腳中顯示＃作為目標網址，如果用戶禁用了javascript，則會在點擊鏈接時在其網址末尾添加＃。

恕我直言的最佳方法是將處理程序附加到代碼中的鏈接，而不是HTML中。

var e = document.getElementById("#myLink");
e.onclick = executeSomething;

Answer 4

這基本上是您想要遵循的模式：

• 編寫HTML標記
• 從JavaScript附加事件處理程序

這是一種方式：

<a id="link1" href="#">Something</a>

<script type="text/javascript">
// get a reference to the A element
var link1 = document.getElementById("link1");

// attach event
link1.onclick = function(e) { return myHandler(e); };

// your handler
function myHandler(e) {
    // do whatever

    // prevent execution of the a href
    return false;
}
</script>

其他人提到了jQuery，它更強大，跨瀏覽器兼容。

Answer 5

最佳做法是將您的javascript與標記完全分開。 這是使用jQuery的一個例子。

 <script type="text/javascript">
     $(function() {
         $('a#someLink').click( function() {
              doSomething();
              return false;
         });
     });
 </script>

 ...

 <a href="#" id="someLink">some text</a>

Answer 6

是的，我同意使用onclick並將href完全從錨標簽中刪除...不知道你喜歡做什么但我喜歡在函數內部保留'return false'語句。

Answer 7

主要區別在於：

1. 默認情況下，瀏覽器假設href屬性是一個字符串（目標url）
2. 瀏覽器知道在onclick屬性中這是一些javascript

這就是為什么有些人通過<a href="javascript: ... ;">...</a>向瀏覽器指定“嘿，當您閱讀此超鏈接的href屬性時解釋javascript”

要回答這個問題，那就是區別！

OTOH使用javascript事件時的最佳做法是另一個故事，但大多數觀點都是由其他人在這里做出的！

謝謝