iPhone/Android浏览器偶尔会关注链接href，而不是jQuery onclick事件

我有一个移动网页库页面，其中有一个CSS浮动的"下一个"链接。CSS float属性使链接具有display:block行为。jQuery touchstart事件绑定到链接。当用户单击链接时，绑定到该touchstart事件的Javascript代码会通过Ajax将库提前一张幻灯片。换句话说，没有页面刷新。

然而，我注意到，偶尔当我触摸链接块空间中不是链接文本本身的区域时，浏览器会跟随href并导致页面刷新（因为URL已经更改），而不是执行绑定到touchstart事件的Javascript代码。

有人见过这个吗？有办法解决这个问题吗？

我把它简化为下面的代码，它仍然会发生，尽管频率要低得多。

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

我在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的绑定？

相关内容

最新更新

热门标签：