如何停止 <a> 标记跳转到 href 属性指定的目标？ [复制]

Question

我知道<a href="javascript:void(0)">Link</a> 可以胜任，

但我打算做的是指定一个href，但被点击时不会跳转到它，就像：

<a href="http://mydomain.com" onclick="...">Link</a>

当我单击此链接时，我只想调用 onclick，而 href 只是一个“显示”而不跳转到 http://mydomain.com。

这如何通过 javascript 或 css 来完成？非常感谢！

Answer 1

有几种方法可以做到这一点。如果您必须在 HTML 中完成答​​案，那么：

<a href="mydomain.com" onclick="function(e){e.preventDefault()}">click here</a>

但更好的做法是遵循 Andrew Spartar 的解决方案，并使用类或其他选择器分离 JavaScript。

Answer 2

为链接添加类，例如：class="not-jump"

然后在jQuery中添加监听器：

$( ".not-jump" ).click(function(e) {
    e.preventDefault();
});

这应该可以解决问题。

Answer 3

像这样：

<a href="http://mydomain.com" onclick="myFunc(event)">Link</a>

JS：

function myFunc(e) {
    e.preventDefault();

   ...
}

并将html与js分开：

<a href="http://mydomain.com" class="somelink">Link</a>

JS：

$(".somelink").on('click', function(event) {
     event.preventDefault();
});