Ввімкнення ": активного" псевдокласу на сенсорному екрані - html, google-chrome, touch, touchscreen

На даний момент я розробляю програму JavaScript, яка буде розгорнута на кіоску з сенсорним екраном під керуванням Chrome у режимі кіоску.

Я помітив, що коли я використовую мишу, щоб натиснути наКнопки в інтерфейсі, стилі, застосовані псевдокласом ": active", видно, коли миша вниз. Моя проблема полягає в тому, що та сама кнопка, що спрацьовує дотиком до екрана, не запускає активний стан.

Чи є спосіб змусити сенсорну подію поводитись так само, як натискання миші?

Відповіді:

Якщо припустити, що CSS: активний псевдоклас не працює, вам, ймовірно, доведеться використовувати події DOM.

Чи події "mousedown" та "mouseup" працюють із сенсорними екранами? Припустимо, що вони це роблять, ви можете спробувати щось подібне:

addEventListener("mousedown", function (event) {
if (event.target.setAttribute) {
event.target.setAttribute("data-active", "");
}
}, true);

addEventListener("mouseup", function (event) {
if (event.target.removeAttribute) {
event.target.removeAttribute("data-active");
}
}, true);

Потім у своєму CSS замініть: active на [data-active], наприклад:

div[data-active] {
/* blah blah */
}

Я не думаю, що це буде працювати так само ... Вам може знадобитися зробити певну хитрість, щоб, наприклад, дочірні елементи працювали правильно.