javascript - 一起使用 <a href> 链接和 <onclick> 功能

Question

如何使这个标签与 href 和 onClick 功能一起使用？ (onClick 应该先运行然后 href)

版本 1

<a href="#" id="myHref">Click me</a>

$("#myHref").on('click', function() {
    document.getElementById(".myDiv").style.flexGrow = "5";
     window.location = "http://www.google.com";

});

版本 2

 <a href="http://www.google.com" onclick="return myFunction();">Link</a>

function myFunction() {
    document.getElementById(".myDiv").style.flexGrow = "5"; 
}

Answer 1

您需要取消点击，调用您的动画，然后添加延迟以跟随链接。

$("#myHref").on('click', function(evt) {
    evt.preventDefault(); //cancel the default click action
    document.getElementById(".myDiv").style.flexGrow = "5";
    var url = this.href;  //get the href of the clicked link
    window.setTimeout( function () {  //delay setting the location
        window.location.href = url;
    }, 5000); //number of milliseconds to wait
});

setTimeout 将允许动画发生。根据需要调整时间。