JavaScript：onclick 并返回 false

Question

我在 HTML 中使用它：

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

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

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

但总是会被忽视？！ “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

属性中可防止发生默认行为（导航）。您还可以通过破坏 JavaScript 中的

onclick

属性来实现此目的（即，将

.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>

Answer 3

我认为如果你将它放入

preload

函数中，并且在

onclick

事件中只需放入

return false

就可以了。也许您尝试过这段代码？

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

Answer 4

尝试将

return false

子句放入内联函数中：

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

Answer 5

 handleClick = (event) => {
if (this.props.preventDefaultOnClick) {
  event.preventDefault()
}

}

const anchorProps = {
  href: helpLink,
  className: styles.help,
  onClick: this.handleClick,
}
// If there's no helpTitle, then we just need to display the snippet without any expander.
// In this usecase, there is no contextual link.
if (helpTitle === '') {
  return (
    <a
      {...anchorProps}
      data-prevent-default-on-click={preventDefaultOnClick}
    >
      {helpSnippet}
    </a>
  )
} else {
  const contextLink = (
    <a {...anchorProps}>
      {contextText}
    </a>
  )

is

data-prevent-default-on-click={preventDefaultOnClick}

相当于

onclick="return false;"

?

Answer 6

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