Показывать при наведении Javascript работает отлично, но как мне добавить или изменить клик для мобильных устройств?Javascript

Форум по Javascript
Ответить
Anonymous
 Показывать при наведении Javascript работает отлично, но как мне добавить или изменить клик для мобильных устройств?

Сообщение Anonymous »

У меня есть карта, на которой пользователь может навести указатель мыши на число на карте, и появится всплывающая информационная карточка. Затем, когда они нажимают на номер, он переходит на веб-сайт с информацией о карте.
Это не работает на мобильных устройствах, поскольку на номер невозможно навести курсор.
Мне интересно, как мне сделать так, чтобы информационная карточка появлялась при нажатии на номер, а затем скрывалась при втором нажатии?
Или есть лучший способ получить это было бы здорово работать как на компьютере, так и на мобильных устройствах?
Я так и сделал поиск, но не могу найти ничего похожего на JavaScript, который я использую. Я вообще не знаком с Java-скриптом, но научился работать с другими примерами.
Проверил сообщение - Jquery показывает при наведении курсора, скрывается при клике -
Это ссылка на карту
https://illomaps.net/comox_hotlist.html


Код: Выделить всё

let paths = document.querySelectorAll("path");
let cardWidth = card.getBoundingClientRect().width;
let cardHeight = card.getBoundingClientRect().height;

paths.forEach((p) => {
p.addEventListener("mouseleave", (evt) => {
card.style.visibility = "hidden";
});
p.addEventListener("mousemove", (evt) => {
let pos = oMousePos(svg, evt);
let text = p.dataset.text;
card.style.visibility = "visible";
card.style.top = pos.y + "px";
card.style.left = pos.x + "px";
card.innerHTML = text;
});
});

function oMousePos(element, evt) {
let ClientRect = element.getBoundingClientRect();
let currentX = Math.round(evt.clientX - ClientRect.left);
let currentY = Math.round(evt.clientY - ClientRect.top);

//close to right
if (evt.clientX + cardWidth >= ClientRect.right) {
currentX = Math.round(evt.clientX - ClientRect.left - cardWidth);
}
//close to bottom
if (evt.clientY + cardHeight>= ClientRect.bottom) {
currentY = Math.round(evt.clientY - ClientRect.top - cardHeight);
}
return {
x: currentX,
y: currentY
};
}



Подробнее здесь: https://stackoverflow.com/questions/793 ... lick-for-m
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»