Браузер iPhone / Android иногда следует по ссылке href вместо события jQuery onclick - PullRequest
Новая
       2

Браузер iPhone / Android иногда следует по ссылке href вместо события jQuery onclick

1 голос
/ 22 февраля 2012

У меня есть страница веб-галереи для мобильных устройств, где у меня есть всплывающая ссылка «следующий» с помощью CSS.Свойство float в CSS заставляет ссылку отображать поведение блока.Событие сенсорного запуска jQuery связано со ссылкой.Когда пользователь нажимает на ссылку, код Javascript, связанный с этим событием сенсорного запуска, продвигает галерею на один слайд через Ajax.Другими словами, обновление страницы не выполняется.

Однако я заметил, что иногда, когда я касаюсь области блочного пространства ссылки, которая не является текстом ссылки, браузер следует href и вызывает обновление страницы(потому что URL-адрес изменился) вместо выполнения кода Javascript, привязанного к событию touchstart.

Кто-нибудь видел это раньше?Есть ли способ исправить это?

Я упростил это до приведенного ниже кода, и это все еще происходит, хотя и гораздо реже. 

<!DOCTYPE html>
   <html>
   <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>Test</title>

        <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

        <style type='text/css'>
            .cont { width: 320px; }
            .next { border-left: 1px solid #000; float: right; text-align: right; width: 65px; }
            .msg { clear: both; width: 200px; }
        </style>

        <script type='text/javascript'>//<![CDATA[ 
            $(function(){
                $('.next').bind('click touchstart', function(event) {
                    event.preventDefault();  
                    if (event.type == 'touchstart') {
                        $(this).unbind('click');
                    }                
                    $('.msg').append('<p>Click!</p>');                
                });
            });//]]>  
        </script>
    </head>
    <body>
        <div class="cont"><a href="http://www.yahoo.com" class="next">Next</a></div>
        <div class="msg"></div>
    </body>    
</html>

1 Ответ

2 голосов
/ 22 февраля 2012

Я проверил это на своем iPhone, и это, кажется, работает. По какой-то причине после регистрации события touchstart вы отменяете события клика. Есть ли причина для этого?

Когда вы нажимаете на текст ссылки, все, что она регистрирует, действительно touch start, поэтому отмена привязки click ничего не сломит. Однако я верю, что когда вы касаетесь за пределами текстовой ссылки, но все еще в пределах блока, она регистрирует как touchstart, так и click, поэтому на данный момент у вас уже есть несвязанный click, и он работает как обычный ссылка.

Вы должны заметить, что при первом клике за пределами границ он никогда не переходит на yahoo.com. Это делают только один раз.

Итак, по сути, вам нужно удалить это unbind, вот так: 

    <script type='text/javascript'>//<![CDATA[ 
        $(function(){
            $('.next').bind('click touchstart', function(event) {
                event.preventDefault();            
                $('.msg').append('<p>Click!</p>');                
            });
        });//]]>  
    </script>

Есть ли какая-то причина, по которой вы хотели бы отстегнуть click?

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

Нет похожих вопросов

...