CODEWITHSUNDEEP
javascriptjqueryandroidiphonebrowser
Stephen
Stephen

Reputation: 2550

iPhone/Android browser occasionally follows link href instead of jQuery onclick event

I have a mobile web gallery page where I have a CSS floated "next" link. The CSS float property causes the link to have a display: block behavior on it. A jQuery touchstart event is bound to the link. When the user clicks on the link, the Javascript code bound to that touchstart event advances the gallery by one slide via Ajax. In other words, there is no page refresh.

However, I noticed that occasionally when I touch an area of the link's block space that is not the link text itself, the browser follows the href and causes a page refresh (because the URL has changed) instead of executing the Javascript code bound to the touchstart event.

Has anybody seen this before? Is there a way to fix this?

I simplified it down to this code below, and it still happens, although much less frequently.

<!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>

Upvotes: 1

Views: 1077

Answers (1)

mck
mck

Reputation: 2190

I tested this on my iPhone and it seems to work. For some reason after registering a touchstart event you are unbinding the click events. Is there any reason for that?

When you click on the text of the link all it seems to register is indeed touch start, so unbinding click does not break things. I do believe, however, that when you touch outside the text link, but still within the block space it registers both a touchstart and click, so at this point you have already unbound click and it works as a regular link.

You should notice, that on your first click outside the bounds it never goes to yahoo.com. It's only the subsequent once that do that.

So in essence what you need to do is remove that unbind, as so:

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

Is there any reason why you would want to unbind click?

Upvotes: 2

Related Questions