Блог

Главная - Вопросы по программированию - jQuery для события наведения на iPhone / iPad

jQuery для события наведения на iPhone / iPad

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

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

Кажется, я не могу заставить его слишком работать с тем, что у меня есть до сих пор, кто-нибудь использовал это раньше? 

 <script>
    $(document).ready(function() {

        //ipad and iphone fix
        if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
             $("#primary-navigation li a").bind('touchstart', function(){
                console.log("touch started");
             });

             $("#primary-navigation li a").bind('touchend', function(){
                console.log("touch ended");
             });
        }
    });
</script>

Я добавил предупреждение непосредственно перед моими селекторами, которое, похоже, работает…

Комментарии:

1. Какая часть не работает, обнаружение браузера, привязка события или console.log ? Вы получаете сообщение об ошибке или …?

2. Похоже, что наведение не работает, я не получаю сообщение об ошибке в своей консоли. В моих тегах <a> у меня есть текст для рендеринга cufon, так может ли это быть проблемой?

3. У вас есть дополнительный }); после второго console.log() — это просто опечатка в вашем вопросе, или ваш реальный код такой?

4. Извините, это опечатка в моем вопросе

5. Хорошо, попробуйте добавить a console.log() or alert() сразу после if (перед привязкой события), чтобы хотя бы подтвердить, что if это работает (кстати, вы можете выполнить этот тест с помощью одного регулярного выражения). И отредактируйте свой вопрос, чтобы исправить опечатку.

Ответ №1:

Во-первых, если вы используете jQuery до версии 1.4.3, попробуйте связать события с .live() помощью вместо .bind() . Это гарантирует, что вы будете привязываться к этому событию даже для будущих, динамически вводимых новых элементов, отвечающих на соответствие селектора.

Если вы используете jQuery 1.4.3 , но ранее 1.7, используйте .delegate() вместо .bind() .

Если вы используете jQuery 1.7 , тогда используйте .on() .

Тем не менее, если ваш тест выполняется на iPhone или iPad, используйте alert() вместо console.log() , поскольку вы вряд ли сможете проверить console выходные данные на этих устройствах.

Я также могу указать, что опубликованная вами разбивка разметки нарушена, так как у вас в </cufon элементе отсутствует символ ‘>’. Похоже, это может быть проблемой копирования-вставки.

Наконец, я вижу, что вы используете события touch *; Я должен предположить, что вы используете jQuery Mobile, jQTouch или что-то в этом роде?

Потому что, если вы не на одном из них, я сильно сомневаюсь, что вы могли бы зарегистрировать слушателей для событий касания, поскольку базовый jQuery не имеет представления для них в своем собственном API.

Ответ №2:

Я добавил предупреждение…

 $("nav#primary-navigation ul li a").bind('touchstart', function(){
    console.log("touch started");
alert('clicked');       
});

Который работает при нажатии, поэтому я знаю, что я все правильно нацеливаю, есть ли теперь способ отключить щелчок по ссылке на ul li a?