javascript - 为什么这不能阻止默认链接？

Question

我试图阻止默认链接，因为我使用 jQuery 动态地将页面加载到 div 中，并且每个 like 的 href 只是页面之前的名称(例如 href=home，并修复在下面的代码中加载到 home.php)。

//initialize home page as active on load up and deactivate link
var activePage = $('a[href$="home"]');
var activePageHref = activePage.attr('href');
activePage.attr('href', '#');

$('a').click(function(e) {
    e.preventDefault();
    //set the page clicked on
    var page = $(this).attr('href');
    //check to see if there are any extras to url for php
    var pageCheck = page.split('?');   
    //sort page type
    if (pageType == null) {
        //dynamically load the page in div bodycontent
        $('#bodycontent').load(page + '.php');
    } else {
        $('#bodycontent').load(page + '.php?' + pageCheck[1]);
    }
    //pull up last disabled link for navigation
    var setOld = $('a[href$="' + activePageHref + '"]');
    setOld.attr('href', '' + activePageHref + '');
    //set the new disabled link for navigation
    activePage = page;
    //make link inactive
    $(this).attr('href', '#');
});

最后返回 false 是可以的，直到我在点击事件函数中添加了更多我需要发生的事情，但准确地说，这部分:

//pull up last disabled link for navigation
    var setOld = $('a[href$="' + activePageHref + '"]');
    setOld.attr('href', '' + activePageHref + '');
    //set the new disabled link for navigation
    activePage = page;
    //make link inactive
    $(this).attr('href', '#');

现在，e.preventDefault();，这是我所理解的做我需要发生的事情的正确方法，正在阻止整个事情在任何链接上触发。我被困住了。我只需要停止默认操作，并使用我构建的功能以及最后添加的额外功能，以使我的导航更漂亮。

还要补充一点，我确实有一个与此导航的 ul 相关的悬停功能，但没有包含它，因为它不会引起问题，但如果需要，我可以将其放在这里。这是本文档准备功能中唯一的其他内容。

Answer 1

更新:

由于您最初更改了禁用链接的 href，属性包含选择器稍后将无法再次找到它来激活它。我建议采取稍微不同的做法。

您可以使用类捕获整个“禁用链接”功能。如果您向应“禁用”的链接添加一个类，则可以阻止浏览器仅跟踪具有该指定类的链接。

当您单击“已启用的链接”时，请关注它，然后将其禁用。然后，启用所有其他链接。

$('a').click(function() {
    $(this).addClass('disabledLink');
    $('a').not(this).removeClass('disabledLink');
}

然后，为整个文档设置一个事件监听器，以防止对特定类的链接执行默认操作。

$(document).on('click', 'a.disabledLink', function(e) {
    e.preventDefault();
}

这应该可以实现您想要的效果(即它将替换上面的整个“点击”处理程序)。请注意，href 永远不会更改为“#”。

<小时/>

否则:仅缓存链接本身及其 href

//pull up last disabled link for navigation
activePage.attr('href', '' + activePageHref + '');

//set the new disabled link for navigation
activePage = $(this);
activePageHref = $(this).attr('href');

//make link inactive
$(this).attr('href', '#');

<小时/>

您有一个语法错误，导致 JS 引擎停止:

//pull up last disabled link for navigation
$('a[href$="' + activePageHref + '"]').attr('href', '' + activePageHref + '');

//set the new disabled link for navigation
activePage = page.attr('href');
/* THIS HERE RETURNS A STRING SO YOU CHANGE activePage to a string. */

// Should probably be:
activePageHref = page.attr('href');

//make link inactive
activePage.attr('href', '#');

在调用此方法之前，您将 activePage 设置为一个字符串，该字符串没有方法 .attr()，因此它会抛出错误并停止执行该函数。