jQuery單擊錨標記重新加載頁面

Question

正如許多其他線程和外部論壇所建議的那樣，我嘗試將e.preventDefault（）（在將e作為參數傳遞時，而不是在代碼示例中傳遞）放置在可以想象的每個位置，但這不會阻止錨點重新加載頁面。 當我單步調試器時，它將為每個div分配scrollNav click事件，但是當我單擊div鏈接時，它只是重新加載頁面，並且調試器不會在highlightSelection函數的任何行上停止。 我嘗試過的另一種方法是在this.click中使用匿名函數，並將e.preventDefault（）作為第一行，但是它什么也沒做。

我也不太了解為什么您要放置e.preventDefault（），就像其他許多人建議的那樣。 基本上不是說return false嗎？ 這可能會阻止鏈接重新加載頁面，但是會不會阻止方法中的代碼執行？

jQuery(document).ready(function() {

jQuery('.scrollNav').each(initSideNavForSelection);

}); // end ready

function initSideNavForSelection() {
    this.click(highlightSelection);
}

function highlightSelection() {
    var selectedDataID = this.attr("data-id");

jQuery('.scrollNav').each(function() {
    if (this.attr("data-id") === selectedDataID) {
        this.addClass("selected");
    } else {
        this.removeClass("selected");
    }
})

}

Answer 1

添加onclick="return false;" 到錨點。 或將initSideNavForSelection函數更改為

this.click(function(e) {
    e.preventDefaults();
    highlightSelection();
});

任一個

Answer 2

要使您的代碼運行，我必須做一些事情。 您可以在此處進行鏈接。

這是清單：

1. 在左上角的Frameworks＆Extensions部分下，將JQuery添加為小提琴使用的框架 。
2. 取出破碎onclick="Event.stop(event)"內聯屬性作為Event是未定義的。
3. 在initSideNavForSelection()和initSideNavForSelection() highlightSelection()函數中，用$(this)替換this的用法。 this代表DOM對象，而$(this)是圍繞this的JQuery包裝器。 后者將響應諸如.click()類的JQuery方法，但不會響應前者。

到目前為止，無論是否e.preventDefault() ，您的小提琴都無法重新加載頁面。

最后，除了event.preventDefault() ， return false還會調用event.stopProgagation()以防止事件在立即終止回調執行之前使DOM冒泡。 調用event.preventDefault()不會立即終止函數調用。