如何在href之前触发onClick事件

Question

我想在onClick()事件中执行某些功能，并对同一个元素进行href设置。但实际发生的情况是，当我们单击该元素时，它并没有完全触发onClick()，而是转移到了href链接。

如何确保onClick()先完成并触发href之后再执行。

<a href="" onclick="javascript:triggerMe()">click</a>

- Vinoth Babu

---

onclick 会首先触发，只有在 onclick 返回后 href 才会被执行一次！你的 onclick 里面是否包含了异步操作，需要等待它返回或者其他什么原因吗？请提供 onclick 的代码... - Shai

@techfoobar 我其实是在你之前7秒钟复制了你。 - Shai

onclick = test();function test() { log.data() } 点击 = 测试();函数 测试() { 日志.数据() } - Vinoth Babu

它会记录数据的，亲爱的.. 谷歌分析.. - Vinoth Babu

听起来像是异步的...你需要在你的点击处理器中加入return false;，这将完全阻止href的触发，然后当log.data()完成（应该会传回调），手动将用户发送到href页面（或者移除JS onclick处理器，然后触发元素上的再次点击）。如果你不知道怎么做，发出你的完整代码，我们应该能够帮助。 - Shai

Answer 1

据我理解，您不想跳转到其他页面，因此可以使用return false，例如：

<a href="" onclick="javascript:triggerMe();return false;">click</a>

- equinox

Answer 2

如果你想中止href的效果，你需要返回一个false值。尝试使用以下代码。

<a href="yourLink.com" title="my link" onclick="return triggerMe();"> Click me </a>

Javascript 部分

<script>
function triggerMe()
{
    if (condition) 
    {
        //do stuffs
        //This will tell browser to follow the link.
        return true;
    } 
    else 
    {
        //do stuffs
        //This will cancel the default behaviour of the browser.
        //Abort the effect of href
        return false;
    }
}
</script>

- DxTx

Answer 3

我的最佳建议是尝试使用以下的表单：

首先，将您的href更改为：

<a href="#null" onclick="javascript:triggerMe()">click</a>

并在您的HTML代码中添加一个带有display=none按钮的表单：

<form action="http://www.myhref.com"><button id="GoToHref" style="display:none"></button></form>

其中 action 是您想要的 href。onclick 事件调用 triggerMe() 函数。将您的函数更改为包括:

function triggerMe() {
    var DelayhrefCall;
    //include all code for what triggerMe() must do, then as the last line add
    DelayhrefCall = window.setTimeout(hrefCall, 500); 
    //500 millisecond delay, change time as desired
}

在500毫秒的延迟后，将调用hrefCall()函数：

function hrefCall() {
document.getElementById('GoToHref').click();
}

然后点击表单内的display:none按钮，触发表单的操作，将您带到所需的href。如果您链接到站点上的其他页面，则可以完美地运行。如果您链接到外部页面，则需要向表单添加目标：

<form action="http://www.myhref.com" target="_blank"><button id="GoToHref"    
style="display:none"></button></form>

- The One and Only ChemistryBlob

Answer 4

<a  onclick="javascript:triggerMe()" href="">click</a>

它将会起作用

- kishore kingmaker

Answer 5

 <a href="" onclick="return triggerme()" >click</a>
 function triggerme(e){
    if(condition is true){
       return true;
    } else {
       e.preventDefault();
       return false;
    }  
 }

试试这个，肯定能行

- Neeraj Kumar

---

顺便说一下，这里没有任何 jQuery 的痕迹。 - user2816674