在手机跳转到链接之前，我如何显示锚标记的悬停动作?

Question

我想做的事情

我试图在手机上显示锚标记的悬停动作。所以我写ontouchstart="在它的父元素上，并创建了子元素来显示点击屏幕的动作。

但是(当然，)它在显示动作之前直接跳转到链接。然后，现在我努力做到了通过第一次点击显示悬停动作·点击第二次进入链接。

这些是代码。

aタグ
https://qiita.com/" id="sprite_dancer_a" class="sprite_dancer">
divタグ(onclick属性)
">">https://www.google.com/'">

.sprite_dancer {
background-image: url("../img/test-image.png");
width: 213px;
height: 190px;
background-position: 0 0;
}
// スプライトアニメーション
.sprite_dancer:hover{
animation: sprite 1s steps(10) infinite;
}
@keyframes sprite {
from { background-position: 0 0; }
to { background-position: -2130px 0; }
}

下面是演示网站。https://rsaeki0.parallel.jp/sprite-hover/

我在我的手机(android,chrome)上检查了这个，但是它工作得不太好。有时候它完全符合我的预期，但有时它不会在第一次点击时保持悬停，或者它永远不会跳转到链接我多次录制的内容。

我尝试过的事情

我编写了jQuery，第一次点击给出类，第二次点击跳转到链接。

.animating {
animation: sprite 1s steps(10) infinite;
}
@keyframes sprite {
from { background-position: 0 0; }
to { background-position: -2130px 0; }
}

// aタグをクリックした回数を記録する変数
let clickCount = 0;
// .sprite_dancerをクリックした際の処理
$(".sprite_dancer").on("click", function(event) {
event.preventDefault();
clickCount++;
if (clickCount === 1) {
// アニメーションを開始する
$(this).addClass("animating");
setTimeout(function() {
// アニメーションが終了したら、再度クリックした場合に備えて、
// animatingクラスを除去する
$(".sprite_dancer").removeClass("animating");
}, 3000);
} else if (clickCount === 2) {
// リンク先へ遷移する
window.location = $(this).attr("href");
}
});

我认为这可能有效…但这是不是太勉强了?有人知道更聪明、更有效的方法吗?

或者在智能手机上显示为a标签编写的悬停动作，或者试图通过编写ontouchstart本身来实现这一点，这不再是一个错误吗?

你能给我一些建议吗?如果英语中有错误，我想道歉。

Answer 1

我为您编写了用于单击事件的代码。这将运行一次点击。你需要修改你的jQuery代码。

// On Click Event
$(".sprite_dancer").on("click", function (event) {
event.preventDefault();
// add class on click
$(this).addClass("animating");
// Remove class after 3s.
setTimeout(function () {

$(".sprite_dancer").removeClass("animating");
}, 3000);
// Redirect to page after 4s.
setTimeout(function () {
window.location = $(this).attr("href");
}, 4000);
});