如何防止點擊“#”鏈接跳轉到頁面頂部？

Question

我目前正在使用<a>標簽和 jQuery 來啟動點擊事件等。

示例是<a href="#" class="someclass">Text</a>

但我討厭“#”如何讓頁面跳轉到頁面頂部。 我可以做什么？

Answer 1

所以這是舊的但是......以防萬一有人在搜索中找到它。

只需使用"#/"而不是"#" ，頁面就不會跳轉。

Answer 2

在jQuery中，當你處理點擊事件時， 返回 false 以阻止鏈接以通常的方式響應防止發生默認操作，即訪問href屬性（根據 PoweRoy 的評論和Erik 的回答）：

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

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

Answer 3

你甚至可以這樣寫：

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

我不確定它是一種更好的方法，但它是一種方法:)

Answer 4

解決方案#1：（簡單）

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

---

解決方案#2：（需要javascript ）

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

---

解決方案 #3: (需要jQuery )

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

Answer 5

您可以使用event.preventDefault()來避免這種情況。 在此處閱讀更多信息： http : //api.jquery.com/event.preventDefault/ 。

Answer 6

只需使用<input type="button" />而不是<a>並使用 CSS 將其樣式<a>看起來像一個鏈接。

按鈕是專門為點擊而制作的，它們不需要任何 href 屬性。

最好的方法是使用 onload 操作創建按鈕並通過 javascript 將其附加到您需要的位置，因此在禁用 javascript 的情況下，它們根本不會顯示並且不會混淆用戶。

當您使用href="#"您會得到大量指向同一位置的不同鏈接，當代理不支持 JavaScript 時，這些鏈接將無法工作。

Answer 7

如果您想使用錨點，您可以像其他建議的答案一樣使用http://api.jquery.com/event.preventDefault/ 。

您還可以使用任何其他元素（如跨度）並將點擊事件附加到該元素。

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

Answer 8

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

Answer 9

你可以使用#0作為href，因為0不允許作為id，頁面不會跳轉。

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

Answer 10

帶有 href="#" 的鏈接應該幾乎總是被一個按鈕元素替換：

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

使用帶有 href="#" 的鏈接也是一個可訪問性問題，因為屏幕閱讀器可以看到這些鏈接，屏幕閱讀器會讀出“鏈接 - 文本”，但如果用戶點擊它就不會去任何地方。

Answer 11

如果元素沒有有意義的 href 值，那么它就不是真正的鏈接，那么為什么不使用其他元素呢？

正如 Neothor 所建議的那樣，跨度同樣合適，如果樣式正確，將作為可以點擊的項目明顯可見。 你甚至可以附加一個懸停事件，當用戶的鼠標移動到它上面時，讓元素“亮起來”。

然而，話雖如此，您可能想要重新考慮您網站的設計，使其在沒有 javascript 的情況下運行，但在 javascript 可用時通過 javascript 進行增強。

Answer 12

只需使用

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

查詢

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

Answer 13

#/技巧有效，但會向瀏覽器添加歷史事件。 因此，單擊返回不起作用，因為用戶可能希望/期望它。

$('body').on('click', 'a[href="#"]', function(e) {e.preventDefault() }); 是我采用的方式，因為它適用於已經存在的內容，以及加載后添加到 DOM 的任何元素。

具體來說，我需要在.btn-group (Reference)內的引導下拉菜單中執行此操作，所以我做了：

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

這樣它是有針對性的，並且不會影響頁面上的任何其他內容。

Answer 14

有4種類似的方法可以防止頁面在沒有任何JavaScript的情況下跳到頂部：

選項1：

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

選項 2：

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

選項 3：

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

選項 4（不推薦）：

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

但如果您在 jQuery 中處理點擊事件，最好使用event.preventDefault() 。

Answer 15

我用過了：

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

Answer 16

您可以只傳遞一個沒有 href 屬性的錨標記，並使用 jQuery 來執行所需的操作：

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

Answer 17

我一直使用：

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

試圖阻止頁面跳轉時。 不確定這是否是最好的，但似乎多年來一直運行良好。

Answer 18

您也可以在處理完 jquery 后返回 false。

例如。

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

Answer 19

我使用這樣的東西：

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

Answer 20

防止頁面跳轉，需要調用e.stopPropagation(); 調用e.preventDefault(); ：

stopPropagation阻止事件在 DOM 樹中向上傳播。 更多信息在這里： https : //api.jquery.com/event.stoppropagation/

Answer 21

如果要遷移到同一頁面上的 Anchor Section 而不跳頁，請使用：

只需使用“#/”而不是“#”，例如

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

Answer 22

在#之后添加一些內容會將頁面的焦點設置為具有該 ID 的元素。 最簡單的解決方案是使用#/即使您使用的是 jQuery。 但是，如果您在 jQuery 中處理事件，則event.preventDefault()是最佳選擇。

Answer 23

對我來說最簡單的就是這樣做。

<a href="#" onclick="return false;">Some text</a>

使用 JS 的原因是大多數現代網站都依賴它。

Answer 24

<a href="#!">Link</a>和<a href="#/">Link</a>如果必須多次單擊同一個輸入，則它不起作用。它只需要在 1 個事件中點擊多個輸入。

最好的方法仍然是使用<a href="#">Link</a>

然后，

event.preventDefault();