2011-07-04 25 views
15

Trong dự án tôi làm việc gần đây tôi đã chuyển từ việc phát triển các máy chủ phụ trợ (tức là không phải web) sang các thứ liên quan đến web. Trong đoạn mã HTML tôi đã tìm thấy những điều sau đây ở khắp mọi nơi:Băm duy nhất trong anchor href?

<a href='#'>some link</a> 

Sau đó, một số JS được gắn vào sự kiện click của <a> phần tử.

Băm duy nhất này có bất kỳ ý nghĩa đặc biệt nào không? Tôi hiểu cách href='#some_id' yêu cầu trình duyệt di chuyển đến phần tử có ID = some_id. Nhưng href='#' không hoạt động theo cách đó, đúng không? Nếu đó là tất cả về cách tạo một đoạn văn bản có thể nhấp, tại sao không chỉ sử dụng một số <span>?

+0

Nếu bạn để trống href, nó sẽ tải lại trang hiện tại, đó là lý do tại sao có # ... –

+1

@webardo - đúng, nhưng nó phức tạp hơn thế. với băm, nó sẽ nhảy lên đầu trang, cũng không có khả năng được mong muốn. Những điều này thường được thực hiện trong conjuntion với javascript trở về sai, mà dừng hành động 'href' được thực hiện. Băm vẫn tốt hơn một chuỗi rỗng, bởi vì nếu người dùng vô hiệu hóa Javascript và sau đó nhấp vào liên kết, nó sẽ có ít hậu quả không mong muốn hơn. – Spudley

+0

Cũng tìm thấy phần mở mắt này: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid – Leo

Trả lời

15

Chính xác. Những gì bạn thấy ở đây là bằng cách nào đó thiết kế xấu (mặc dù nó là khá phổ biến để sử dụng href="#").

Điều gì thực sự sẽ làm là nhảy lên đầu trang nếu hành động mặc định không được ngăn chặn.

Tốt hơn nhiều sẽ được

  • sử dụng một <button> và tạo kiểu phù hợp (thậm chí có thể chỉ chèn qua JavaScript)
  • hoặc để điểm liên kết đến một số tài nguyên thực tế (kích hoạt một số hành động trên máy chủ bên) và đính kèm trình xử lý sự kiện JavaScript để thực hiện hành động này (hoặc tương tự) trên máy khách và ngăn theo liên kết (từ khóa: unobtrusive JavaScript).

Nó cũng phụ thuộc vào việc trang web có nghĩa là chạy với JavaScript bị tắt hay không. Nếu có, thì liên kết đó (nhưng cũng có nút) sẽ không hoạt động.

Nhưng trong mọi trường hợp, từ quan điểm ngữ nghĩa, chỉ sử dụng liên kết để có điều gì đó "có thể nhấp" là sai.

+1

Tôi muốn rằng 'href' kích hoạt một số hành động phía máy chủ, với' onclick' có một 'return false' ở cuối để các trình duyệt được kích hoạt js sẽ không thực hiện hành động phía máy chủ. – Emyr

+1

@Emyr: Đó thực sự là ý của tôi :) –

0

Vì bạn muốn trình duyệt tạo kiểu liên kết này giống như tất cả các liên kết khác và không cần chỉ định (ví dụ: class) rằng "bạn biết đấy, tôi muốn nó trông giống như một liên kết mặc dù về mặt kỹ thuật thì không" . Điều đó thực sự không tốt cho việc bảo trì.

0

Bởi vì:

  • phong cách được thực hiện cho bạn;
  • liên kết vẫn là liên kết ngữ nghĩa, ngay cả khi liên kết bắt đầu bằng số không href.

tu từ câu hỏi:
bạn có thể giải thích lý do tại sao bạn nghĩ rằng một span là thích hợp hơn a cho một liên kết?

Phụ Lục:
Cái gì đó như một button này hay cách khác yếu tố năng động chưa phù hợp tốt hơn ở đây, nhưng tham gia một phi liên kết span của văn bản và giả vờ rằng đó là một liên kết là tồi tệ hơn.

2

Băm duy nhất này có bất kỳ ý nghĩa đặc biệt nào không?

Nó liên kết đến phía trên cùng của trang

Tại sao không chỉ cần sử dụng một <span>?

  • Nó sẽ không được theo thứ tự lấy nét
  • Nó sẽ không đảm nhận kiểu mặc định của cái gì đó nên được bấm

Một <button> sẽ là tốt hơn so với một khoảng. Một cái gì đó built on top of a server side alternative sẽ là tốt nhất.

+0

Việc đưa vào thứ tự tập trung có vẻ là một lý do rất tốt. Có cách nào khác để bao gồm một số yếu tố trong thứ tự tiêu điểm không? – Jasiu

+0

'tabindex' trong một số trình duyệt, nhưng đó là một thay thế kém cho việc có liên kết hoặc nút gửi với dự phòng hợp lý. – Quentin

10

Một băm trên các liên kết của chính nó lên đầu trang. Điều này đôi khi được sử dụng cho chính xác mục đích này - tức là liên kết "Quay lại đầu trang", nhưng thường thì loại liên kết này được sử dụng kết hợp với một cú nhấp chuột Javascript ngay cả khi trả về false, và do đó phủ nhận hành động của href.

Trong bối cảnh này, nó được sử dụng theo cách này vì những lý do sau đây:

  • Một thẻ <a> có thể ngữ nghĩa chính xác - tức là item được nhấp vào là hành động như một liên kết; tức là để tải thêm nội dung, hoặc mở một popup, vv, mặc dù nó đang sử dụng Javascript cho chức năng của nó.

  • Sử dụng thẻ <a> cũng có nghĩa là phần tử sẽ được tạo kiểu theo cách giống như các thẻ <a> khác trên trang web. Lưu ý rằng IE6 chỉ hỗ trợ :hover trên các yếu tố <a> và không có gì khác, có nghĩa là nếu trang web được thiết kế để hoạt động trong IE6 hoặc vẫn cần hỗ trợ, thì bạn không thể sao chép chức năng này với thẻ. Đây là lý do rất tốt để sử dụng các thẻ <a> cho tính năng này trong quá khứ, ngay cả khi nó không phù hợp về mặt ngữ nghĩa. Những ngày này nó ít của một vấn đề. Ngay cả trong các trình duyệt hiện đại, việc sử dụng <a> cho các mục này vẫn hữu ích khi cắt giảm các bản định kiểu được sao chép nếu bạn muốn chúng trông giống như các liên kết khác. Các liên kết cũng có một vài tính năng đặc biệt khác có thể khó sao chép với các phần tử khác, chẳng hạn như trong trình tự chỉ mục tab, v.v.

  • HTML yêu cầu thẻ <a> có thuộc tính href để phần tử được hiển thị dưới dạng một liên kết, do đó, băm được sử dụng như một giá trị tối thiểu cho việc này. Ngoài ra, có hàm băm trong thuộc tính href có nghĩa là liên kết sẽ không gây ra bất kỳ hậu quả không mong muốn khó chịu nào nếu người dùng tắt Javascript hoặc nếu nhà phát triển quên return false;. Ngược lại, có một chuỗi rỗng sẽ làm cho nó tải lại trang, mà không có khả năng là những gì bạn muốn nếu bạn vừa chạy một số javascript. Tuy nhiên nó cũng phổ biến để có các điểm liên kết đến một URL hợp lệ, mà sẽ được chạy nếu Javascript đã được tắt; đây là một cách hay để có cơ chế rút gọn cho trang web của bạn. Nhưng nó không phải lúc nào cũng phù hợp, và rõ ràng không phải là ý định ở đây.

Vì mục đó chỉ kích hoạt sự kiện nhấp trong Javascript, không có lý do gì khiến bạn không thể sử dụng bất kỳ yếu tố nào khác cho điều này. Bạn có thể dễ dàng sử dụng một số <span> (hoặc thậm chí tốt hơn, thay vào đó là <button>), nhưng các điểm trên sẽ cho thấy rằng không có gì sai khi sử dụng thẻ <a>.

Hy vọng điều đó sẽ hữu ích.

4

Hàm băm trong href thực sự là thực hành tốt, và chắc chắn tốt hơn so với khoảng cách có kiểu (hoặc tệ hơn, một nút). Hàm băm trong thẻ cũng có thể được thay thế bằng một số href="javascript:;", điều này sẽ ngăn việc 'chuyển lên đầu'.

Hàm băm trong href hầu như là dấu hiệu cho thấy có javascript được kết nối với neo đó.

Đối với những người đã đề xuất một nút, đây là yếu tố biểu mẫu, không sử dụng nó bên ngoài biểu mẫu, vui lòng.

Khoảng thời gian có thể nhưng sẽ không nhận được tiêu điểm tab, như đã nói ở trên và không có ý nghĩa ngữ nghĩa nào (cũng được chú ý trước đó).

Vì vậy, để tóm tắt:

Tốt:

<a href="#">click</a> 
<a href="javascript:;">click</a> 

Kinda Tốt:

<span>click</span> 

Bad Thực hành

<button>click</button> 
+0

giải thích tuyệt vời. cảm ơn. –

Các vấn đề liên quan