jQuery onMouseover / onClick для пользователей с сенсорным экраном (например, iPad) - PullRequest
Новая
       11

jQuery onMouseover / onClick для пользователей с сенсорным экраном (например, iPad)

6 голосов
/ 08 декабря 2011

Итак, я превратил разборное меню в систему, основанную на веб-сайте, которая свернула меню в 6 «жемчужных кнопок» в правом верхнем углу экрана, каждая из которых выглядит одинаково и содержит число, которое является числомоповещения, относящиеся к пунктам в меню.

Их содержание на самом деле не имеет отношения к моему вопросу, а просто объясняет, что они не являются текстовыми и поэтому не имеют четких и легко читаемых ярлыков, объясняющих, что такоепункты меню делают.

Поэтому я поместил всплывающую подсказку onMouseover, которая отображает скрытый div, объясняющий, что представляет собой каждый элемент меню.

Также существует событие onClick, когда jQuery отображает меню..

Это частная интранет-система, я бы не стал использовать эти меню на общедоступном веб-сайте, поскольку она недостаточно ясна, но, учитывая, что это приложение, моя проблема:

КогдаНапример, при просмотре на iPad (и, вероятно, на других устройствах с сенсорным экраном) onMouseover обрабатывается как onClick, поэтому, «нажатие» на кнопку просто показывает всплывающую подсказку, а не меню, как требуется.

Какой совет по обращению с этим?

Я видел эту ветку Обнаружение пользователей iPad с помощью jQuery? итак, учитывая, что это частное веб-приложение, я мог бы обнаружить пользователей iPad и пересоздать jQuery, чтобы игнорировать команду onMouseover для пользователей iPad, но если бы я развернул подобное приложение для чего-то, что может иметь больше пользователей, чтобудет способ обработать эти два события?

1 Ответ

7 голосов
/ 08 декабря 2011 
if ("ontouchstart" in window || "ontouch" in window) {
    // bind the relevant functions to the 'touch'-based events for iOS
}
else {
    // use the classic mouse-events, 'mouseover,' 'click' and so on.
}

Я протестировал это с помощью следующей простой демонстрации, хотя и без привязки к событию (пока) в полноэкранном режиме JS Fiddle demo (я также сделал TinyUrl для перенаправления на эту демонстрацию , для удобства входа в устройства iOS: tinyurl.com / drtjstest2 / ).

Пересмотренная демонстрация с назначенными на события функциями: 

var body = document.getElementsByTagName('body')[0];

if ("ontouchstart" in window) {
    body.style.backgroundColor = 'red';
    body.ontouchstart = function(){
        this.style.backgroundColor = 'yellow';
    };
    body.ontouchend = function(){
        this.style.backgroundColor = 'green';
    };
}
else {
    body.style.backgroundColor = 'green';
    body.onmousedown = function(){
        this.style.backgroundColor = 'yellow';
    };
    body.onmouseup = function(){
        this.style.backgroundColor = 'red';
    };
}

Демонстрация JS Fiddle (и альтернатива TinyUrled: tinyurl.com / drtjstest3 / ).

Ссылки:

...