HTML标签<a>希望同时添加href和onclick

123

我想问一下HTML标记

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

如何使用href和onClick使其成为标签？（最好先运行onClick，然后再运行href）

231

您已经有了所需的内容，但语法进行了少量更改：

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

<a>标签onclick和href属性的默认行为是执行onclick，然后按照进行href操作，直到onclick不返回false，即取消事件（或未阻止事件）

— 伊恩
source

还有一种方法可以使用element.addEventListener函数吗？

— TheEquah '17

4

在我放入href="#"实际URL 之前，它对我不起作用。

— yegor256

我正在使用laravel框架，因此在我的刀片视图中包括了它，它不起作用，有人尝试过使用laravel吗？

— 金刚Prapradhdhaka

如果我在href中的mvc控制器中调用了任何操作方法，则此解决方案无法正常工作。有人可以帮忙吗？

— DharaPPatel

10

使用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>

展开摘要

— 苏迪塔·查特吉
source

11

我不会使用任何JavaScript框架。但感谢您的回答

7

以上不是实际链接。不能在新选项卡中打开它，这是一种非常不好的做法。如果可以在新标签页中打开某些内容（没有网址），请务必添加有意义的href属性。

— Nux

2

要实现此目的，请使用以下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>

这是工作示例。

— 卡米尔（KamilKiełczewski）
source

这对我在Chrome中有效，但是Safari似乎可以运行该功能，但无法打开href ...任何提示？

— 奔

@Ben我在没有JS的小提琴上进行了测试-仅使用纯HTML：<a href="http://example.com" >Item</a>在Chrome中，我看到一些消息，允许页面运行此链接（在chrome网址栏的末尾提醒）。在控制台Safari中我看到warrning：[锁定]页面fiddle.jshell.net/_display不允许从显示不安全内容example.com -所以也许这是一些安全问题（仅适用于小提琴？）

— 卡米尔Kiełczewski

1

无需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
source

-1

用于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
source

仅在AngularJS

— Corrodian