JavaScript:onclick并返回false

Question

我在我的HTML中使用它:

 <a href="#" onclick="preload('12345');return false;">Click</a>

它在外部js文件上调用函数preload()并且到目前为止工作正常.

但我有几十个这样的链接,并希望删除那些"返回false"并只将一个直接放在pres() - 函数的js文件中.

但它总会被忽略？!"return false"真的只能在onclick ="..."中使用吗？

Answer 1

function preload () {
    // some code
    return false;
}

<a href="#" onclick="return preload('12345');">Click</a>

或使用 addEventListener

例如:

<a href="#" class="link">Click</a>
<script type="text/javascript">
    document.querySelector('.link').addEventListener('click', function (e) {
        // some code;

       e.preventDefault();
    }, false);
</script>

Answer 2

放入return false;内联onclick属性可以防止发生默认行为（导航）。您还可以通过破坏onclickJavaScript 中的属性来实现此目的（即，将.onclick属性分配为返回 false 的函数），但这种做法因过时且可能有害（它会覆盖附加到该事件的任何其他事件侦听器）而令人皱眉。例子）。

防止<a>元素发生默认单击行为的现代方法是简单地从附加的事件侦听器中调用.preventDefault()触发事件的方法。您可以使用标准方式附加侦听器.addEventListener()

一些例子：

// this works but is not recommended:
document.querySelector(".clobbered").onclick = function() {
  return false;
};

// this doesn't work:
document.querySelector(".attached").addEventListener("click", function() {
  return false;
});

// this is the preferred approach:
document.querySelector(".attachedPreventDefault").addEventListener("click", function(e) {
  e.preventDefault();
});

<a href="/fake" onclick="return false;">If you click me, I don't navigate</a><br/>
<a class="clobbered" href="/fake">If you click me, I don't navigate</a>
<br/>
<a class="attached" href="/fake">If you click me, I navigate</a>
<br/>
<a class="attachedPreventDefault" href="/fake">If you click me, I don't navigate</a>