使用e.preventDefault()后链接仍触发页面加载的问题排查

首先，你的核心问题出在**e.preventDefault()的位置**！因为AJAX请求是异步的，当你把e.preventDefault()放在success回调里时，浏览器的默认跳转行为（点击a标签后的页面刷新）早就已经触发了——回调函数要等AJAX请求完成后才执行，这时候再阻止默认行为已经晚了。

修复步骤 #

1. 提前阻止默认行为：把e.preventDefault()和return false移到AJAX调用的外面，在点击事件触发的第一时间就阻止浏览器的默认跳转行为。
2. 修正选择器错误：你代码里的$("sidebar2 li.active")少了个点，应该是$(".sidebar2 li.active")，不然找不到对应的元素。
3. 可选：优化事件绑定（如果元素是动态生成的）：如果你的.sidebar2 li a是动态添加到页面的，建议用事件委托的方式绑定点击事件，避免事件失效。

修改后的代码示例 #

$('.sidebar2 li a').click(function (e) {
    // 第一步：先阻止默认跳转行为，这是关键！
    e.preventDefault();
    test = true;
    var button = $(this);
    var noteId = button.data("noteid");
    // 修正选择器，加上点
    $(".sidebar2 li.active").removeClass("active");
    var postData = { id: noteId };
    
    $.ajax({
        url: '/API/Note',
        type: 'get',
        data: postData,
        success: function (resp) {
            if (resp.success == true) {
                $('#app-bar-left').html(resp.note.navBarHTML);
                $('#cell-content').html(resp.note.noteContentHTML);
                window.history.pushState({ path: window.location.href }, resp.note.title, '/MyNotes/Note/' + resp.note.noteId);
                document.title = resp.note.title;
                $('*[data-noteId="'+resp.note.noteId+'"]').parent().addClass("active");
                test = false;
            }
        }
    });
    // 也可以在这里加return false，和e.preventDefault()作用类似（但前者还会阻止事件冒泡）
    // return false;
});

为什么之前的方法没用？ #

• href="#"：这种方式会修改URL，导致历史记录里出现重复条目，而且如果页面有滚动，还会跳转到顶部，体验不好。
• onclick="javascript:void(0)"：如果你的jQuery事件处理程序里没有正确阻止默认行为，这个内联脚本可能会被jQuery的事件覆盖，或者因为异步操作的时序问题，还是没能阻止跳转。

额外注意事项 #

• 如果你的侧边栏元素是动态生成的（比如通过AJAX加载的），建议用事件委托绑定点击事件，比如：

  $(document).on('click', '.sidebar2 li a', function(e) {
      // 同样先阻止默认行为，然后执行后续逻辑
      e.preventDefault();
      // ... 你的AJAX代码
  });
  

• 确保data-noteid的大小写一致：你代码里用了button.data("noteid")，而后面选择器用的是data-noteId，虽然jQuery的data方法不区分大小写，但HTML属性里最好保持一致，避免潜在问题。

内容的提问来源于stack exchange，提问作者DethoRhyne