强制点击空链接不移动页面焦点答案

【问题标题】：Force click on empty link to not move the page focus强制点击空链接不移动页面焦点
【发布时间】：2015-05-16 22:35:46
【问题描述】：

我有一个空链接：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用preventDefault()。

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

请记住：

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

【讨论】：

所以，您还建议我最好使用.on() 而不是.bind()，因为在这种情况下，锚点是文档，而不是元素？
并非如此。我的意思是：stackoverflow.com/questions/11847021/jquery-bind-vs-on。猜一个引用太多，这可能会令人困惑。

【解决方案3】：

替换 javascript:void(0) 中的 href 值；并且点击链接不会产生任何效果

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

【讨论】：

【解决方案4】：

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

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

【讨论】：