Запуск псевдокласса": active " на сенсорном экране

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

Я заметил, что когда я использую мышь, чтобы щелкнуть кнопки на интерфейсе, стили, применяемые псевдо-классом ":active", видны, когда мышь не работает. Моя проблема в том, что одна и та же кнопка, вызванная касанием экрана, не вызывает активного состояния.

есть ли способ заставить событие касания вести себя так же, как мыши?

7
google-chrome html touch touchscreen

1 ответов

предполагая, что 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 */
}

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

2