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

Question

我的 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: <a onclick="go('/nextPage')">Click me to go to the next page!</a>

在上面的示例中，link 运行s 执行函数的脚本然后打开 URL。但是，如果您右键单击 link，则不会像其他 link 那样有 'open in new tab' 选项，因为它没有 href。如果有 href，它会在没有运行 js 的情况下转到下一个选项卡。是否可以让它有一个 href，这样右键单击就可以了，但仍然是运行 JS？所以基本上，它将授权给 onclick 事件，而不是运行宁 href 除非发生右键单击。

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

Answer 1

不要使用 onclick。相反，在阻止默认操作（通过 e.preventDefault()）的所有锚标记上添加一个 click 事件侦听器，而是调用 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: <a href="https://stacksnippets.net">Click me to go to the next page!</a>

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

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

How To Make A HTML <a> Element Have A href But Default to Onclick?

html

javascript

css

tabs

hyperlink