【问题标题】:JavaScript: onclick and return falseJavaScript:点击并返回 false
【发布时间】:2016-03-03 20:01:12
【问题描述】:

我在我的 HTML 中使用它:

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

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

但我有几十个这样的链接,我想删除所有那些“返回 false”的链接,只将一个直接放在 js 文件的 preload() 函数中。

但它总是会被忽略?! “return false”真的只在 onclick="..." 中起作用吗?

【问题讨论】:

标签: javascript


【解决方案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>

【讨论】:

  • 基本上,要解释为什么会这样,onclick块的内容就是一个函数。评估 false; 是有效的(如果愚蠢的话)JavaScript,但基本上 JavaScript 希望你实际上是 return false
【解决方案2】:

return false; 放入内联onclick 属性可防止发生默认行为(导航)。您也可以通过破坏 JavaScript 中的 onclick 属性来实现这一点(即,将 .onclick 属性分配为返回 false 的函数),但这被视为过时且可能有害(它会覆盖任何其他事件侦听器)例如,附加到该事件)。

防止&lt;a&gt; 元素的默认点击行为发生的现代方法是简单地从附加的事件侦听器中调用触发事件的.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>

【讨论】:

    【解决方案3】:

    我认为,如果您将其放入 preload 函数并在 onclick 事件中,只需放入 return false 即可。也许你已经尝试过这段代码?

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

    【讨论】:

      【解决方案4】:

      尝试将 return false 子句放入内联函数

      <input onclick="yourFunction();return false;">
      

      【讨论】:

        【解决方案5】:

        我可能会建议不要使用 onClick() 而是使用类似的 jQuery。

        【讨论】:

        • jQuery 吃掉了太多的千字节 ;)
        • 哈哈。好吧,我以前使用过 onClick() ,但我能做的非常有限。但祝你好运,恐怕我已经没有主意了。
        猜你喜欢
        • 2012-06-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多