强制单击空链接以不移动页面焦点

Force click on empty link to not move the page focus

本文关键字：移动 焦点 单击 链接      更新时间：2023-09-26

我有一个空链接：

<a href="#" id="stop-point-btn">+ add stop-point</a>

绑定到 JS 函数：

$("#stop-point-btn").bind("click", addStopPoint);

它只是在div 中添加一些内容：

function addStopPoint() {
    $("#stop-point-content").append(stopPointHtml())
}

单击后，如果我向下滚动了一点，它会将我移回页面顶部（当然，因为提供了#空 id 值）。但是我怎样才能使我在页面上的位置不会改变（即滚动位置）。

替换 JavaScript：void（0） 中的 href 值;单击链接不会产生任何效果

<a href="javascript:void(0);" id="stop-point-btn">+ add stop-point</a>

使用 preventDefault（）。

 $("#stop-point-btn").bind("click", function(e) {
        e.preventDefault();
        addStopPoint();
    });

并记住：

从 jQuery 1.7 开始，.on（） 方法是首选的方法 将事件处理程序附加到文档。对于早期版本， .bind（） 方法用于将事件处理程序直接附加到 元素。

将事件作为参数传递给函数并添加此语句。 event.preventDefault()添加停止点函数内部。

您需要

传递href值是返回undefined的javascript:void(0);这就是浏览器保持在同一页面上并且不滚动页面的原因。 

<a href="javascript:void(0);" id="stop-point-btn">+ add stop-point</a>
相关文章：