Смоделируйте падение с Tap в мобильном браузере, нажмите с вторым нажатием (без jQuery) ⇐ Html

[Anonymous]

Я использую JavaScript для добавления/удаления класса, когда пользователь колеблется над элементами ссылок на веб-сайте, но мне нужно изменить его, чтобы также иметь TAP имитировать эффект падения на устройствах с поддержкой, а затем привести второй Tap Fire The Link. До сих пор мои слабые попытки изменить сценарий, не связанный с касанием, не удались. В основном мне нужно сделать то же самое для устройств с поддержкой, добавив класс на с первым нажатием, но предотвращая стрельбу ссылки до второго нажатия.
window.addEventListener("load", () => {
let items = document.querySelectorAll(
".change-background .container .homepage-nav"
);

items.forEach((item) => {
item.addEventListener("mouseover", () => {
items.forEach((item) => {
item.classList.remove("on");
});
item.classList.add("on");
});
});
});
< /code>
Поэтому я изменил вышеперечисленное, чтобы предотвратить стрельбу для устройств с сенсорным экраном, и, кажется, работает - эффект наказания активируется на первом TAP. Но я застрял в том, как затем включить второй нажатие, чтобы активировать ссылку. < /P>
if ('ontouchstart' in document.documentElement)
{

window.addEventListener("load", () => {
let items = document.querySelectorAll(
".change-background .container .homepage-nav"
);

items.forEach((item) => {
item.addEventListener("touchstart", () => {
items.forEach((item) => {
item.classList.remove("on");
});
item.classList.add("on");
event.preventDefault();
return false;
});
});
});

}

< /code>
Редактировать: я попробовал код ниже, и он все еще не работал ... Первый щелчок дает эффект падения по мере необходимости, но второй щелчок ничего не делает. Я подозреваю, что это может иметь какое -то отношение к тому факту, что класс «on» добавляется в Div, содержащий ссылку, а не к самой ссылке: < /p>
if ('ontouchstart' in document.documentElement)
{
window.addEventListener("load", () => {
let items = document.querySelectorAll(
".change-background .container .homepage-nav"
);
items.forEach((item) => {
item.addEventListener("touchstart", () => {
items.forEach((item) => {
item.classList.remove("on");
});
if (item.classList.contains("on")) return true;
else {
item.classList.add("on");
event.preventDefault();
return false;
}
});
});
});
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... -no-jquery