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

Question

我有一个空链接：

<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值）。但是我怎样才能使我在页面上的位置不会改变（意味着滚动位置）。

Answer 1

使用preventDefault()。

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

请记住：

  

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

Answer 2

替换javascript中的href值：void（0）;并且点击链接将不会产生任何影响

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

Answer 3

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

Answer 4

您需要传递href值javascript:void(0);，返回undefined这就是浏览器停留在同一页面而不滚动页面的原因。

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