[英]Delay click event on <a> element
Is there a way to hold the execution of the default action of a click even trigger on an <a>
element and resume it later? 有没有办法在
<a>
元素上保留点击甚至触发器的默认操作的执行并在以后继续执行?
I specifically do not mean cancelling the event and rewriting it later, as in: 我特别不是要取消该事件并在以后重写它,例如:
document.getElementsByTagName("a")[0].addEventListener("click", function(event){ var url = this.getAttribute("href"); var target = this.getAttribute("target"); event.preventDefault(); setTimeout(function(){ console.log("TODO: open " + url + " in " + target); }, 1000); });
<a href="http://example.com" target="_blank">Click me!</a>
… neither triggering a brand new click: …均未触发全新的点击:
var delayed = false; document.getElementsByTagName("a")[0].addEventListener("click", function(event){ var link = this; if (!delayed) { event.preventDefault(); setTimeout(function(){ link.click(); }, 1000); delayed = true; } });
<a href="http://example.com" target="_blank">Click me!</a>
function cloneEvent(event) { return Object.setPrototypeOf(new Event(event.type), event); } var delayed = false; document.getElementsByTagName("a")[0].addEventListener("click", function(event){ var newEvent = cloneEvent(event); if (!delayed) { event.preventDefault(); setTimeout(function(){ event.target.dispatchEvent(newEvent); }, 1000); delayed = true; } });
<a href="http://example.com" target="_blank">Click me!</a>
Why not? 为什么不?
Rewriting means you need to reinvent everything the browser would you (error prone and time consuming). 重写意味着您需要重新构造浏览器的所有内容(容易出错且耗时)。
Triggering means it's no longer a user-initiated event (eg popup blocker) and the event cloning version doesn't even work. 触发意味着它不再是用户启动的事件(例如,弹出窗口阻止程序),并且事件克隆版本甚至不起作用。
I'm curious (main reason). 我很好奇(主要原因)。
I get the impression that Event.preventDefault() puts the event in a final state. 我的印象是Event.preventDefault()将事件置于最终状态。 Am I correct?
我对么? Is it just not possible?
只是不可能吗?
On the link set href='about:blank'
which qualifies as a genuine user click and then add data-href=
url . 在链接集
href='about:blank'
,该链接有资格成为真正的用户,然后单击,然后添加data-href=
url 。 The eventListener passes the data-href
value through to a function wrapped in an anonymous function which is set Timed out . eventListener将
data-href
值传递给包装在设置为Timed out的匿名函数中的函数。 The function activateLink()
uses location.href
to open the link. 函数
activateLink()
使用location.href
打开链接。
var lnx = document.links; lnx[0].addEventListener('click', delayClick, false); lnx.jsi.addEventListener('click', delayClick, false); lnx.so.addEventListener('click', delayClick, false); function delayClick(e) { let destination = this.dataset.href; setTimeout(function(e) { activateLink(destination) }, 1000); } function activateLink(destination) { location.href = destination; }
a { display:block; margin: 10px 0; }
<a href='about:blank' data-href='https://example.com' target='_blank'>EXAMPLE</a> <a id='jsi' href='about:blank' data-href='https://javascript.info' target='_blank'>JAVASCRIPT.INFO</a> <a name='so' href='about:blank' data-href='https://stackoverflow.com' target='_blank'>STACKOVERFLOW</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.