在標簽中調用javascript函數的更好方法

Question

以下哪種方法是從標簽調用js函數的更好方法？

<a href="javascript:someFunction()">LINK</a>

要么

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

我在這里看到了這個問題 ，但它說<span onclick="someFunction()">是一個更好的選擇。 但由於某些原因，我必須使用<a>鏈接。

編輯：我正在尋找一個跨瀏覽器和跨平台的解決方案，它也適用於機器人和iPad。

Answer 1

兩者都不好。

應該獨立於實際標記配置行為。 例如，在jQuery中你可能會做類似的事情

$('#the-element').click(function () { /* perform action here */ });

在一個單獨的<script>塊中。

這樣做的好處就是它

1. 以與CSS分隔標記和樣式相同的方式分隔標記和行為
2. 集中配置（這有點是1的推論）。
3. 使用jQuery強大的選擇器語法，可以輕松擴展以包含多個參數

此外，它會優雅地降級（但使用onclick事件也是如此），因為如果用戶沒有啟用JavaScript，您可以為鏈接標記提供href 。

當然，如果您不使用jQuery或其他JavaScript庫（但為什么這樣做？），這些參數仍然很重要。

Answer 2

第二種選擇的一些優點：

1. 你可以在onclick里面使用this來引用錨本身（在選項1中做同樣的事情會給你一個window ）。

2. 您可以將href設置為非JS兼容的URL，以支持舊版瀏覽器（或禁用JS的瀏覽器）; 支持JavaScript的瀏覽器將執行該函數（保留在頁面上你必須使用onclick="return someFunction();"並從函數內部return false或onclick="return someFunction(); return false;" to prevent默認動作）。

3. 我發現當使用href="javascript:someFunction()"並且函數返回一個值時會發生奇怪的事情; 整個頁面將被該值替換。

陷阱

內聯代碼：

1. 在document范圍內運行，而不是在window范圍內運行的<script>標記內定義的代碼; 因此，可以基於元素的name或id屬性來解析符號，從而導致嘗試將元素視為函數的意外效果。

2. 更難重用; 需要精細的復制粘貼才能將其從一個項目移動到另一個項目。

3. 為頁面添加權重，而外部代碼文件可以由瀏覽器緩存。

Answer 3

我很想說兩者都是不好的做法。

使用onclick或javascript:應該被解雇，以支持從外部腳本中偵聽事件，從而允許更好地分離標記和邏輯，從而減少重復代碼。

另請注意，外部腳本會被瀏覽器緩存。

看看這個答案 。

這里實現跨瀏覽器事件偵聽器的一些好方法。

Answer 4

現代瀏覽器支持內容安全策略或CSP。 這是最高級別的Web安全性，強烈建議您應用它，因為它完全阻止了所有XSS攻擊 。

你的兩個建議都打破了CSP，因為它們允許內聯Javascript（可以由黑客注入）在你的頁面中執行。

最佳做法是在Javascript中訂閱該事件，如Konrad Rudolph的回答。