Оптимизация веб-интерфейса для сенсорных экранов (устранение нежелательного перетаскивания мышью и т. Д.) - PullRequest
Новая
       58

Оптимизация веб-интерфейса для сенсорных экранов (устранение нежелательного перетаскивания мышью и т. Д.)

2 голосов
/ 17 мая 2011

Я создаю небольшой веб-интерфейс киоска для использования на 7-дюймовом сенсорном экране. Я не буду вдаваться в подробности о самой системе, но браузер на сенсорном экране - это постоянно полноэкранный Firefox, работающий на Ubuntu.

После того как сенсорный экран заработал, я написал простую тестовую страницу с кучей больших кнопок. Опробовав его на сенсорном экране, я сразу заметил, что многие быстрые сенсорные действия интерпретируются как перетаскивание мыши. Таким образом, текст подсвечивался, изображения-призраки перетаскивались и все остальное, что происходит, когда вы случайным образом щелкаете и перетаскиваете веб-страницу.

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

* {
    cursor: none;
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit browsers */
}

Впрочем, еще много чего интересного. Я снял короткое видео, чтобы продемонстрировать: http://www.youtube.com/watch?v=4tjZ5aIG41E

Вот тестовая страница из этого видео: http://www.depotstreetmarket.com/touch-test/ (предупреждение: курсор мыши исчезнет на этой странице - извините)

У кого-нибудь есть какие-либо советы, которые помогут мне улучшить качество своих страниц при использовании сенсорного экрана? Я открыт для решений HTML / CSS, решений Javascript и конфигураций / дополнений Firefox.

РЕДАКТИРОВАТЬ - Можно упомянуть, что я использую драйвер сенсорного экрана eGalaxTouch , установленный в Ubuntu.

1 Ответ

1 голос
/ 17 мая 2011

Это, однако, самое близкое к тому, что я мешаю людям перетаскивать, нажимать и выбирать мои элементы DOM.Firefox работает лучше всего;) 

.selectDisable {-webkit-user-select: none;  -khtml-user-select: none;   -moz-user-select: none; -o-user-select: none;    user-select: none; }

вы можете применить это к телу

Другие вещи, такие как я упоминал в комментарии, возможно, вам придется установить настройки устройства .. настройки mosueи установите клики на быстрые и перетаскивания на очень длинные.

Но отключение эффекта перетаскивания в браузерах требует некоторой настройки DOM

Запрет выбора изображений и текста

В IE достаточно применения этого класса.В других браузерах вы должны сделать невидимый (прозрачный) наложенный div.Таким образом, вы можете щелкнуть по своему элементу, но div на самом деле предотвращает перетаскивание элементов позади него. Это странно ... но это работает.У кого-то в посте был хороший ответ.

...