Javascript和錨定標籤，最佳實踐？

Question

快速問題。

我們應該把JavaScript中的HREF或使用的onClick（事件）？

是否有任何優點/缺點使用任何一個。我個人認爲它更容易/清潔劑就乾脆把代碼在href，而不必返回false或擔心跳到＃

是否有每種方法的任何已知的瀏覽器的具體問題...

例子：

<a href="javascript: alert('foo!');">Click Me</a> 
<a href="#" onClick="alert('foo!');return false">Click Me</a> 
<a href="javascript:void(0)" onclick="alert('foo!');">Click Me</a> 

Answer 1

1而是使用onclick。當JS不被允許時，請確保在href有一個合理的回退URL。

2）而不是onclick="..."，你應該使用的事件處理程序。 使用jQuery或XPath查找元素，然後爲每個元素調用element.addEventListener()。

element.addEventListener("click", function() { alert("bar"); }, false); 

還是老辦法...

element.onclick = function() { alert("foo"); }; 

Answer 2

在onclick事件（儘管用JS而不是屬性指定）和一個合理的href屬性。 Build on things that work

Answer 3

一般來說，我會外部化JavaScript，但使用href叫它：

<a href="javascript:foo('bar!');">Click Me</a>

雖然我覺得你的快速alert例子是罰款作爲一種例外。

不過，如果你使用JS庫如jQuery你當然可以直接分配事件 - 見jQuery的教程）第一個例子看起來在錨元素http://docs.jquery.com/Tutorials:How_jQuery_Works

Answer 4

保持代碼分離從HTML是清潔IMO。

<a id="foo" href="#">Click Me</a> 

然後在頭部或單獨的js文件：

document.getElementByID("foo").onclick = function() { alert("hi"); } 

Answer 5

我個人沒有把JavaScript代碼的HTML。您應該使用一個事件偵聽器，該事件偵聽器將在點擊<a>時觸發。

<a href="#" id="linkA">Click Me</a> 

然後：

document.getElementById('linkA').addEventListener('click', function(e){ 
    e.preventDefault(); // Prevents page from scrolling to the top 
    alert('foo!'); 
});