Làm cách nào để ngăn nhấp chuột vào liên kết '#' nhảy lên đầu trang?

Tôi hiện đang sử dụng <a>các thẻ với jQuery để bắt đầu những thứ như các sự kiện nhấp chuột, v.v.

Ví dụ là <a href="#" class="someclass">Text</a>

Nhưng tôi ghét cách '#' làm cho trang nhảy lên đầu trang. Tôi có thể làm gì thay thế?

Trong jQuery, khi bạn xử lý sự kiện nhấp chuột, trả về false để ngăn liên kết phản hồi theo cách thông thườngngăn hành động mặc định, đó là truy cập hrefthuộc tính, diễn ra (theo nhận xét của PoweRoy và câu trả lời của Erik ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Vì vậy, đây là cũ nhưng ... chỉ trong trường hợp ai đó tìm thấy điều này trong một tìm kiếm.

Chỉ cần sử dụng "#/"thay vì "#"và trang sẽ không nhảy.

bạn thậm chí có thể viết nó như thế này:

<a href="javascript:void(0);"></a>

Tôi không chắc chắn đó là một cách tốt hơn nhưng đó là một cách :)

Giải pháp số 1: (đơn giản)

<a href="#!" class="someclass">Text</a>

Giải pháp số 2: (cần thiết javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

Giải pháp số 3: (cần thiết jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Bạn có thể sử dụng event.preventDefault()để tránh điều này. Đọc thêm tại đây: http://api.jquery.com/event.preventDefault/ .

Chỉ cần sử dụng <input type="button" />thay vì <a>và sử dụng CSS để tạo kiểu cho nó giống như một liên kết nếu bạn muốn.

Các nút được tạo riêng để nhấp và chúng không cần bất kỳ thuộc tính href nào.

Cách tốt nhất là sử dụng hành động onload để tạo nút và nối nó vào nơi bạn cần thông qua javascript, vì vậy với javascript bị vô hiệu hóa, chúng sẽ không hiển thị gì cả và không gây nhầm lẫn cho người dùng.

Khi bạn sử dụng, href="#"bạn nhận được vô số liên kết khác nhau trỏ đến cùng một vị trí, điều này sẽ không hoạt động khi tác nhân không hỗ trợ JavaScript.

Nếu bạn muốn sử dụng một neo, bạn có thể sử dụng http://api.jquery.com/event.preventDefault/ như các câu trả lời khác được đề xuất.

Bạn cũng có thể sử dụng bất kỳ yếu tố nào khác như nhịp và đính kèm sự kiện nhấp vào đó.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Bạn có thể sử dụng #0as href, vì 0không được phép dưới dạng id, trang sẽ không nhảy.

<a href="#0" class="someclass">Text</a>

$('a[href="#"]').click(function(e) {e.preventDefault(); });

Chỉ dùng

<a href="javascript:;" class="someclass">Text</a>

YÊU CẦU

$('.someclass').click(function(e) { alert("action here"); }

Nếu phần tử không có giá trị href, thì đó không thực sự là một liên kết, vậy tại sao không sử dụng một số phần tử khác thay thế?

Theo đề xuất của Neothor, một nhịp chỉ phù hợp và, nếu được tạo kiểu chính xác, sẽ rõ ràng rõ ràng như một mục có thể được nhấp vào. Bạn thậm chí có thể đính kèm một sự kiện di chuột, để làm cho elemnt 'sáng lên' khi chuột của người dùng di chuyển qua nó.

Tuy nhiên, đã nói điều này, bạn có thể muốn suy nghĩ lại về thiết kế trang web của mình để nó hoạt động mà không cần javascript, nhưng được tăng cường bởi javascript khi nó có sẵn.

Liên kết với href = "#" hầu như luôn luôn được thay thế bằng một phần tử nút:

<button class="someclass">Text</button>

Sử dụng các liên kết với href = "#" cũng là một mối quan tâm về khả năng truy cập vì các liên kết này sẽ hiển thị cho trình đọc màn hình, nó sẽ đọc ra "Liên kết - Văn bản" nhưng nếu người dùng nhấp vào thì nó sẽ không đi đến đâu.

Bạn chỉ có thể vượt qua thẻ neo mà không có thuộc tính href và sử dụng jQuery để thực hiện hành động bắt buộc:

<a class="foo">bar</a>

Tôi đã sử dụng:

<a href="javascript://nop/" class="someClass">Text</a>

Thủ #/thuật hoạt động, nhưng thêm một sự kiện lịch sử vào trình duyệt. Vì vậy, nhấp trở lại không hoạt động như người dùng có thể muốn / mong đợi nó.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); là cách tôi đã đi, vì nó hoạt động cho nội dung đã có và bất kỳ yếu tố nào được thêm vào DOM sau khi tải.

Cụ thể, tôi cần phải làm điều này trong menu thả xuống bootstrap bên trong một .btn-group(Tham khảo) , vì vậy tôi đã làm:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

Bằng cách này, nó đã được nhắm mục tiêu và không ảnh hưởng đến bất cứ điều gì khác trên trang.

Tôi đã luôn sử dụng:

<a href="#?">Some text</a>

khi cố gắng ngăn chặn việc nhảy trang. Không chắc đây có phải là tốt nhất không, nhưng có vẻ như nó đã hoạt động tốt trong nhiều năm.

Có 4 cách tương tự để ngăn trang nhảy lên đầu mà không cần bất kỳ JavaScript nào:

Lựa chọn 1:

<a href="#0">Link</a>

Lựa chọn 2:

<a href="#!">Link</a>

Tùy chọn 3:

<a href="#/">Link</a>

Tùy chọn 4 ( Không nên dùng ):

<a href="javascript:void(0);">Link</a>

Nhưng sẽ tốt hơn event.preventDefault()nếu sử dụng nếu bạn đang xử lý sự kiện nhấp chuột trong jQuery.

Bạn cũng có thể trả về false sau khi xử lý jquery của bạn.

Ví dụ.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Tôi sử dụng một cái gì đó như thế này:

<a href="#null" class="someclass">Text</a>

Để ngăn trang nhảy, bạn cần gọi e.stopPropagation();sau khi gọi e.preventDefault();:

stopPropagationngăn sự kiện đi lên cây DOM. Thêm thông tin tại đây: https://api.jquery.com/event.stoppropagation/

Nếu bạn muốn di chuyển đến Phần neo trên cùng một trang mà không cần nhảy lên, hãy sử dụng:

Chỉ cần sử dụng "# /" thay vì "#", vd

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Thêm một cái gì đó sau khi #đặt trọng tâm của trang vào thành phần có ID đó. Giải pháp đơn giản nhất là sử dụng #/ngay cả khi bạn đang sử dụng jQuery. Tuy nhiên nếu bạn đang xử lý sự kiện trong jQuery, thì đó event.preventDefault()là cách để đi.

các <a href="#!">Link</a>và<a href="#/">Link</a> không làm việc nếu người ta phải bấm vào cùng một đầu vào nhiều hơn một lần .. nó chỉ mất trong 1 sự kiện click cho mỗi trên nhiều đầu vào.

cách tốt nhất để đi là với <a href="#">Link</a>

sau đó,

event.preventDefault();