在HTML的<a>标签中同时包含href和onclick属性

Question

如果我有这个元素：

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

我该如何让 href 和 onClick 都起作用，最好让 onClick 先运行？

- user1589113

---

请查看此链接：**如何使用JavaScript在HTML中设置A标签链接**。 - Mohamed

这个可能有帮助，对我有效：https://dev59.com/aGs05IYBdhLWcg3wQvuq#7347854 - Menaim

Answer 1

你已经拥有所需内容，只需要进行微小的语法更改：

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

< p > < code ><a>标签的onclick和href属性的默认行为是首先执行onclick，然后只要onclick没有返回false，就会跟随href进行页面跳转，除非事件被取消（或者事件未被阻止）。

- Ian

---

还有一种方法可以使用element.addEventListener函数来实现这个吗？ - TheEquah

在我把真实的网址改成 href="#" 之前，它对我不起作用。 - yegor256

我正在使用Laravel框架，所以在我的Blade视图中包含了这个，但它没有起作用，有人尝试过在Laravel中使用吗？ - Vajira Prabuddhaka

如果我在MVC控制器中的href中调用任何动作方法，则此解决方案不起作用。有人可以帮忙吗？ - DharaPPatel

Answer 2

使用 jQuery，捕获 click 事件并转到网站。

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

- Sudipta Chatterjee

---

我不会使用任何JavaScript框架。但是谢谢你的回答。 - user1589113

以上并不是一个实际的链接。它无法在新选项卡中打开，这是一个非常糟糕的做法。如果某个内容可以在新选项卡中打开（具有网址），请始终添加有意义的“href”属性。 - Nux

Answer 3

为了实现这一点，请使用以下的HTML代码：

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

这里有一个关于 IT 技术的工作实例。

- Kamil Kiełczewski

---

这在Chrome中对我有效，但Safari似乎运行该函数但不打开href...有什么建议吗？ - Ben

@Ben，我在fiddle上进行了测试，没有使用JS - 只有纯html：<a href="http://example.com" >Item</a>，在Chrome中，我看到一些消息要求允许页面运行此链接（在Chrome URL栏末尾的警报）。在Safari中，控制台中显示警告：[blocked] https://fiddle.jshell.net/_display/ 的页面未被允许从http://example.com/ 显示不安全的内容 - 所以可能这是某种安全问题（只在fiddle上？） - Kamil Kiełczewski

Answer 4

无需使用jQuery。

有些人说使用onclick是一个不好的习惯...

这个例子使用纯浏览器Javascript。默认情况下，似乎点击处理程序将在导航之前执行，因此如果您希望可以取消导航并执行自己的操作。

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

- TeamDman

---

这个做法是通过覆盖默认行为来实现的，并且没有什么可以说它是一种不好的做法。这是我使用的方法，因为它可以删除 onClick（同时具有 href 和 onClick 会令人困惑），所以谢谢你提供这个方法。 - Ron Holmes

这是通过覆盖默认行为来实现的，没有什么可以说这是一种不好的做法。这是我采用的方法，因为它移除了 onClick（同时使用 href 和 onClick 会令人困惑），所以谢谢你提供这个方法。 - undefined

Answer 5

请使用<button>代替超链接。通常情况下，只有在导航到实际URL时才应该使用超链接。

我们可以将按钮样式设置成锚点元素的样式。

引自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#onclick_events 通过将href设置为 # 或 javascript:void(0) 来防止页面刷新，然后监听单击事件，经常滥用锚点元素作为假按钮。

这些虚假的href值会在复制/拖动链接、在新标签页/窗口中打开链接、书签或JavaScript加载、错误或禁用时造成意外行为。它们也向辅助技术（如屏幕阅读器）传达不正确的语义。

- Arun

Answer 6

被接受的答案对我没用。然而，防止 a href 的默认行为，然后“手动”跟随链接是有效的。

代码示例如下：

<a href="https://example.com" onClick="myFunction(event)">Link</a>
<script>
function myFunction(event) {
    event.preventDefault();
    // do your thing here
    window.location.href = event.currentTarget.href;
}
</script>

- Viktor Brešan

Answer 7

使用ng-click代替onclick。就是这么简单：

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>

- mak-273

---

仅限于AngularJS。 - Corrodian