Запуск псевдокласса ": active" на сенсорном экране - PullRequest
Новая
       23

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

8 голосов
/ 30 сентября 2010

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

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

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

1 Ответ

3 голосов
/ 01 октября 2010

Предполагая, что псевдокласс CSS: active не работает, вам, вероятно, придется использовать события 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 */
}

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

...