Question

我想问一下HTML标签

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

如何使用 href 和 onClick 来使用 a 标记？（首选onClick，然后运行href）

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>

<a>标记的onclick和href属性的默认行为是执行onclick，然后只要跟href onclick false 1}}不返回{{1}}，取消事件（或事件未被阻止）

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>

Answer 3

不需要jQuery。

Some people say using onclick is bad practice...

此示例使用纯浏览器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>

Answer 4

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

这里是working example。

Answer 5

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

HTML代码<a> want to add both href and onclick working</a>

5 个答案: