Thẻ liên kết HTML với sự kiện onclick Javascript

86

Khi sử dụng Google, tôi thấy rằng họ đang sử dụng các sự kiện onclick trong các thẻ liên kết.

Trong nhiều tùy chọn trong phần google header, nó trông giống như một thẻ bình thường, nhưng onclicking nó không được chuyển hướng nhưng đã mở ra một menu. Bình thường khi sử dụng

<a href='more.php' onclick='show_more_menu()'>More >>></a>

Nó thường chuyển đến 'more.php' mà không kích hoạt show_more_menu(), nhưng tôi đã hiển thị một menu trong chính trang đó. Làm thế nào để làm như google ?

— đứa trẻ thông minh
nguồn

116

Nếu hàm onclick của bạn trả về false, hành vi mặc định của trình duyệt sẽ bị hủy. Như vậy:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

Dù bằng cách nào, google có làm điều đó hay không cũng không quá quan trọng. Sẽ rõ ràng hơn khi ràng buộc các chức năng onclick của bạn trong javascript - theo cách này, bạn tách HTML của mình khỏi mã khác.

— TJHeuvel
nguồn

3

1. Để chắc chắn hơn, hãy sử dụng # in href = "#" và thực hiện những việc cần thiết trong javascript. Có thể an toàn khi nhấp vào liên kết đó với # href; trang không để lại / tải lại url.

— Bimal Poudel

3

Hãy làm theo lời khuyên ở trên một cách thận trọng, vì các quy tắc HTML5 quy định rõ ràng rằng quy tắc href="#"này phải điều hướng lên đầu trang. Bạn có thể chỉ cần thêm hrefattibute mà không có nội dung và nhận được hành vi nhấp chuột. Giả sử #làm url cho các trang thực (Thay vì các ứng dụng 100% chiều cao một trang) thường là một ý tưởng tồi.

— Mike 'Pomax' Kamermans

54

Bạn thậm chí có thể thử tùy chọn dưới đây:

<a href="javascript:show_more_menu();">More >>></a>

— sun2
nguồn

1

Cảnh báo: Nếu hàm trả về bất kỳ giá trị rõ ràng nào (ví dụ: return null;nhưng không return;), điều này sẽ gây ra hậu quả không mong muốn trong một số trình duyệt, chẳng hạn như FireFox. Trang sẽ có tất cả nội dung được thay thế bằng giá trị trả về ở định dạng chuỗi (ví dụ [object Object]:).

— rannmann

45

Theo những gì tôi hiểu, bạn không muốn chuyển hướng khi liên kết được nhấp vào. Bạn có thể làm :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

— Aditya Manohar
nguồn

3

Điều này rất hữu ích khi bạn không muốn href trỏ đến bất kỳ đâu.

— kbpontius

Nó thật tuyệt và nó hoạt động nhưng jquery ném ra một lỗi "Lỗi: Lỗi cú pháp, biểu thức không được công nhận: javascript:;"

— TheOddCoder

Tôi đang sử dụng jQuery phiên bản 1.10.2 và tôi không gặp phải lỗi cú pháp mà @TheOddCoder đã gặp phải.

— Mike Finch

1

Sử dụng mã sau để hiển thị menu thay vì chuyển đến các tiện ích href

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

Mở rộng đoạn mã

— Kamil Kiełczewski
nguồn