Nó xuất hiện rất ngắn gọn trong video cuối cùng: làm cách nào để ngăn trình duyệt nhảy xuống khi bạn nhấp vào liên kết băm? Đó là hành vi mặc định của trình duyệt và may mắn thay, với JavaScript, chúng ta có thể yêu cầu trình duyệt không làm điều đó.
Cách đơn giản nhất để xử lý nó là như sau:
$("a").on("click", function(event) ( event.preventDefault(); ));Bạn sẽ thấy các liên kết này không nhảy xuống như bạn tưởng:
Xem Pen a5aeaa4890837ac172605983324d5470 của Chris Coyier (@chriscoyier) trên CodePen
Hãy cẩn thận với điều đó mặc dù tất nhiên. Điều đó sẽ ngăn một liên kết băm nhảy xuống trang, nhưng nó cũng sẽ ngăn một liên kết bình thường chuyển đến một URL mới. Vì vậy, chỉ sử dụng nó trên các liên kết neo mà bạn biết rằng bạn chỉ muốn xử lý trong JavaScript của riêng bạn. Bạn có thể thu hẹp những thứ như $("a(href^='#')"). ví dụ: “Thuộc tính href của liên kết bắt đầu bằng một hàm băm.”
Nhưng thường thì bạn cũng sẽ thấy điều này:
$("a").on("click", function() ( return false; ));Và điều đó cũng đạt được điều tương tự. Điều đang xảy ra ở đây return false;là thực sự đang làm hai điều. Nó đang làm event.preventDefault();và nó đang làm một điều khác:event.stopPropagation();
Bạn có thể sử dụng return false; nếu bạn thích, bạn chỉ cần hiểu stopPropagation là gì và đồng ý với việc nó làm điều đó. Tôi thấy thông thường tốt nhất là không nên dừng Cắm thẻ trừ khi bạn biết rằng bạn đặc biệt muốn làm điều đó. Những gì nó làm là ngăn chặn sự "sôi sục" của sự kiện DOM. Ví dụ: nếu bạn là DOM như sau:
- Home
- About
- Clients
- Contact Us
Sau đó, bạn nhấp chuột phải vào từ “Trang chủ”, sự kiện nhấp chuột đó sẽ kích hoạt trên liên kết neo, sau đó nó sẽ bong bóng đến mục danh sách, sau đó bong bóng đến danh sách không có thứ tự, rồi đến phần tử điều hướng, tất cả đều lên vào chính tài liệu.
Khi bạn thực hiện stopPropagation, đối với bất kỳ sự kiện nào của phần tử mà bạn chạy điều đó, sự sôi sục sẽ dừng lại ở đó. Chỉ cần lưu ý!
Tôi đã viết thêm về sự khác biệt này ở đây.
Ở phần cuối của video, tôi nói về việc ngăn chặn cuộn trên một phần tử bằng PreventDefault. Tôi đã hoàn toàn sai lầm khi bạn có thể làm điều đó. Nó chỉ xảy ra một sự kiện mà bạn không thể dừng lại như vậy. Có nhiều cách để ngăn chặn nó như sử dụng CSS ( overflow: hidden;- có thể hơi kỳ lạ) - hoặc trở nên khá lạ mắt.