如何使 HTML <a> 元素具有 href 但默认为 Onclick？答案

【问题标题】：How To Make A HTML <a> Element Have A href But Default to Onclick?如何使 HTML <a> 元素具有 href 但默认为 Onclick？
【发布时间】：2021-09-19 21:59:18
【问题描述】：

我的 html 页面中有一个 <a>。我用 JavaScript 编写了一个自定义重定向器，因此当您单击按钮时，它会运行一个 JavaScript 函数，该函数在重定向您之前执行重要任务。例如：

function go(page) {
  alert("You are being redirected!")
  // Important things here, such as saving
  open(page, target="_self")
}

a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

Link: &lt;a onclick="go('/nextPage')"&gt;Click me to go to the next page!&lt;/a&gt;

在上面的示例中，链接运行脚本以执行功能，然后打开 URL。但是，如果您右键单击该链接，则没有像其他链接那样的“在新选项卡中打开”选项，因为它没有href。如果有href，它会转到下一个选项卡而不运行js。是否有可能让它有一个 href 以便右键单击工作，但仍然运行 JS？所以基本上，它将授予onclick 事件的权限，而不是运行href，除非发生右键单击。

我尝试删除 onclick 并改用 href="javascript:go('/nextPage);"，但右键单击会导致它转到 chrome 中的 about:blank#blocked。

【问题讨论】：

标签： javascript html css hyperlink tabs

【解决方案1】：

不要使用onclick。相反，在所有锚标记上添加一个click 事件侦听器，以阻止默认操作（通过e.preventDefault()），而是调用go 函数。

function go(page) {
  alert("You are being redirected!")
  // Important things here, such as saving
  open(page, target = "_self")
}

document.querySelectorAll('a').forEach((f) => {
  f.addEventListener('click', function(e) {
    e.preventDefault();
    go(this.getAttribute('href'));
  })
})

a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

Link: &lt;a href="https://stacksnippets.net"&gt;Click me to go to the next page!&lt;/a&gt;

【讨论】：

【解决方案2】：

很抱歉 HTML，我不得不尝试不同的编辑器来检查结果。

试试这个

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <script>

      function go(page) {
      alert("You are being redirected!")
        // Important things here, such as saving
       return false;  // equivalent to preventDefault
      }

  </script>
<body>
   <a href='http://www.example.com' onclick='return go()'>Click me to go to the next page!</a>
</body>
</html>

或者

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <script>

   function go(event) {
     if( !confirm(`Redirect to ${event.target.href} ?`) ) 
         event.preventDefault();
      }

  </script>
<body>
   <a href='/example' onclick="go(event)"> Click me to go to the next page! </a>
</body>
</html>

【讨论】：

谢谢！我最终使用了第二个，因为它更适合我的需要。此外，第二个有一个错字，函数 go 有一个参数，'event'（我认为这是一个受保护的关键字 btw），但后来在代码中它将它引用为 'e' 而不是 'event'。
是的，你是对的。编辑那个。很高兴该解决方案对您有用:)