[英]Vanilla JS: delay click event to add animation
No jQuery please! 请不要jQuery!
I would love not to use jQuery for this, because it's a big library and I only need to do this single thing: 我不希望为此使用jQuery,因为它是一个很大的库,我只需要做以下一件事情:
I would like to add a short delay to a click event so I can fade elements off my page using CSS. 我想给点击事件添加一个短暂的延迟,以便可以使用CSS将元素淡出页面。
I could post all of the code I've tried so far, but you'd get bored. 我可以发布到目前为止已经尝试过的所有代码,但是您会感到无聊。 So here's the one that I think is the closest:
所以这是我认为最接近的一个:
document.getElementsByTagName('a').onclick = function (e) {
// Delay setting the location for one second
setTimeout(function() {this.href}, 90000);
var animOut = document.getElementByClassName('animateOut');
animOut.className += 'out';
};
I've already ruled out using onbeforeunload
, so hijacking the click event seems to be the best way. 我已经排除使用
onbeforeunload
,因此劫持click事件似乎是最好的方法。
Once again, I know this would be a doddle in jQuery, but I would like to avoid it if it's possible. 再一次,我知道这在jQuery中是轻而易举的事,但我想避免这种情况。
Thanks so much for your answers. 非常感谢您的回答。
Ben 本
Thanks to commenters guest271314 and The Alpha, I've settled on this approach, but still have yet to complete the puzzle. 感谢评论者guest271314和The Alpha,我已经确定了这种方法,但仍未完成难题。
window.onload = function(){
var links = document.getElementsByTagName('a');
for( var i=0,il = links.length; i< il; i ++ ){
links[i].onclick = clickHandler;
}
function clickHandler(event) {
event.preventDefault();
// Delay setting the location for one second
setTimeout(function() {
location.href = this.href;
}, 90000);
// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");
// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
// add `out` `className` to `animOut` element at index `i`
animOut[i].classList.add("out");
};
};
};
Having to iterate over the a
tags was an addition I have learned from reading other posts (I'll link to them in a minute). 通过阅读其他帖子(我将在一分钟内链接到它们),我不得不对
a
标签进行迭代。
Unfortunately, the setTimeout
function doesn't seem to be working. 不幸的是,
setTimeout
函数似乎不起作用。 I need to refine what's in this function, but don't know in what way. 我需要完善此函数的内容,但不知道以什么方式。
Further assistance would be most welcome. 欢迎进一步的帮助。
Thanks 谢谢
Ben 本
You may try something like this: 您可以尝试如下操作:
document.getElementsByTagName('a').onclick = function (event) {
event.preventDefault();
document.getElementByClassName('animateOut').className += ' out';
setTimeout(function() {
location.href = this.href;
}, 1000);
};
There should be an "s"
at document.getElementsByClassName
. document.getElementsByClassName
应该有一个"s"
。 To add className
to all animateOut
elements can use a for
loop; 要将
className
添加到所有animateOut
元素,可以使用for
循环; change this.href
to window.location.href = e.target.href
if expected result is to navigate to href
of clicked a
element; 改变
this.href
到window.location.href = e.target.href
如果预期的结果是,导航到href
点击的a
元件; else leave as this.href
is requirement is to refresh current window.location.href
: this.href
within setTimeout
否则保留
this.href
的要求是刷新当前window.location.href
: setTimeout
this.href
document.getElementsByTagName("a").onclick = function (e) {
// Delay setting the location for one second
setTimeout(function() {window.location.href = this.href}, 90000);
// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");
// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
// add `out` `className` to `animOut` element at index `i`
animOut[i].classList.add("out");
};
I can't really take credit for this, the 2 users below (guest271314 and The Alpha) deserve a lot of recognition for what they helped me to achieve. 我对此实在不敢恭维,下面的2位用户(guest271314和The Alpha)对于他们帮助我实现的目标应得到很多认可。 The full code, with a couple of refinements, is:
完整的代码经过一些改进,为:
window.onload = function(){
var links = document.getElementsByTagName('a');
for( var i=0,il = links.length; i< il; i ++ ){
links[i].onclick = clickHandler;
}
function clickHandler(event) {
event.preventDefault();
var travelTo = this.getAttribute("href");
// add `s` to `Element`
var animOut = document.getElementsByClassName("animateOut");
// iterate `animOut` elements
for (var i = 0; i < animOut.length; i++) {
// add `out` `className` to `animOut` element at index `i`
animOut[i].classList.add("out");
};
// Delay page out until the animation finishes
setTimeout(function() {
window.location.href = travelTo;
}, 1000);
};
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.