Thẻ Javascript và Anchor, Thực tiễn tốt nhất?

Question

Câu hỏi nhanh.

Chúng tôi có nên đặt Javascript trong HREF hoặc sử dụng onClick (sự kiện) không?

Có ưu điểm/nhược điểm nào để sử dụng một trong hai tùy chọn này hay không. Cá nhân tôi nghĩ rằng nó dễ dàng hơn/sạch hơn chỉ đơn giản là đặt mã trong href, và không phải trả về false hoặc lo lắng về việc nhảy đến #

Có bất kỳ vấn đề cụ thể trình duyệt nổi tiếng với từng phương pháp ...

Ví dụ:

<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) Thay vì sử dụng onclick. Hãy chắc chắn có một URL dự phòng hợp lý trong href khi JS không được phép.

2) Thay vì onclick="...", bạn nên sử dụng trình xử lý sự kiện. Tìm các thành phần bằng cách sử dụng jQuery hoặc XPath và sau đó cho từng phần tử, hãy gọi element.addEventListener().

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

Hoặc theo cách cũ ...

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

Answer 2

Trong sự kiện onclick (mặc dù được gán với JS chứ không phải thuộc tính) với thuộc tính hợp lý. Build on things that work

Answer 3

Nói chung, tôi sẽ ra bên ngoài JavaScript nhưng sử dụng href gọi nó là:

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

Mặc dù tôi nghĩ nhanh alert ví dụ của bạn là tốt như một ngoại lệ cho quy tắc này.

Tuy nhiên, nếu bạn sử dụng một thư viện JS như jQuery bạn tất nhiên có thể gán các sự kiện trực tiếp - xem ví dụ đầu tiên trong jQuery hướng dẫn mà nhìn vào các yếu tố neo http://docs.jquery.com/Tutorials:How_jQuery_Works

Answer 4

Giữ mã tách biệt với html là sạch IMO.

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

Sau đó, trong đầu hoặc file js riêng biệt:

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

Answer 5

cá nhân tôi sẽ không đặt mã Javascript trong HTML. Bạn nên sử dụng trình xử lý sự kiện sẽ được kích hoạt khi nhấp vào <a>.

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

Và sau đó:

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