Question

我有一个移动网络图库页面，我有一个CSS浮动“下一步”链接。 CSS浮动属性导致链接在其上具有display：block行为。 jQuery touchstart事件绑定到链接。当用户点击链接时，绑定到该touchstart事件的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>

Answer 1

我在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吗？

iPhone / Android浏览器偶尔会跟随链接href而不是jQuery onclick事件

1 个答案: