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()不会立即终止函数调用。