香草JS:延迟点击事件以添加动画

Vanilla JS: delay click event to add animation

本文关键字：事件 添加 动画 JS 延迟 香草      更新时间：2023-09-26

请不要jQuery！

我不想为此使用 jQuery，因为它是一个大库，我只需要做这一件事：

我想为点击事件添加短暂的延迟，以便我可以使用 CSS 淡出页面中的元素。

我可以发布到目前为止我尝试过的所有代码，但你会感到无聊。所以这是我认为最接近的：

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';
};

我已经排除了使用 onbeforeunload ，所以劫持点击事件似乎是最好的方法。

再一次，我知道这将是jQuery中的一个难题，但如果可能的话，我想避免它。

非常感谢您的回答。

本

更新

感谢评论者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");
};
};
};

不得不迭代a标签是我从阅读其他帖子中学到的补充（我将在一分钟内链接到它们）。

不幸的是，setTimeout功能似乎不起作用。我需要优化此函数中的内容，但不知道以何种方式。

非常欢迎进一步的援助。

谢谢

本

我真的不能为此感到高兴，下面的 2 个用户（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();
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);
};
};

你可以尝试这样的事情：

document.getElementsByTagName('a').onclick = function (event) {
    event.preventDefault();
    document.getElementByClassName('animateOut').className += ' out';
    setTimeout(function() {
        location.href = this.href;
    }, 1000);
};
应该有一个

"s"在document.getElementsByClassName。要向所有元素添加className animateOut可以使用for循环;如果预期结果是导航到单击的a元素的href，请将this.href更改为window.location.href = e.target.href;否则离开，因为this.href要求是刷新当前window.location.href：this.href在setTimeout 

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");
};
相关文章：