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

【问题标题】：iPhone/Android browser occasionally follows link href instead of jQuery onclick eventiPhone/Android 浏览器偶尔会跟随链接 href 而不是 jQuery onclick 事件
【发布时间】：2012-02-22 00:18:45
【问题描述】：

我有一个移动 Web 画廊页面，其中有一个 CSS 浮动“下一个”链接。 CSS float 属性使链接具有 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>

【问题讨论】：

标签： javascript jquery android iphone browser

【解决方案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的绑定吗？

【讨论】：

我解除了点击事件的绑定，因为如果我在桌面浏览器中测试页面，我希望点击事件能够正常工作。此外，如果我不取消绑定点击事件，该函数会运行两次：一次用于 touchstart，一次用于点击。我从 Peter Paul Koch 关于移动事件的演示中得到了解除点击事件绑定的想法：slideshare.net/MobileConventionAmsterdam/…
但是如果您在桌面浏览器中运行它，您将永远无法解除绑定。仅当您有 touchstart 事件时才会发生这种情况。另外，当我进行测试时，我还没有体验过该功能运行两次。所以我认为它应该工作。如果支持touchstart，您还可以查看检测支持的事件并注册不同的处理程序。查看perfectionkills.com/… 如果支持touchstart，您首先禁用click，然后绑定touchstart（顺序很重要）。如果不是，您只需绑定click。
Maciek，感谢您的链接。对不起，我的评论搞砸了。你说的对。我只为移动设备取消绑定点击事件，以防止函数运行两次。但是，如果您在我提供的示例中没有遇到同样的问题，那么我需要检查我的原始代码。你给了我一些我没有考虑过的事情。当我有更多关于它的信息时，我会在这里发表评论。
Maciek，我使用功能检测代码来检测触摸设备并抑制点击事件。在单击处理程序函数中同时使用 event.preventDefault() 和 return false，我看到的问题停止了。你是对的，文本链接和链接框区域之间的空间是可点击区域，但我的点击事件处理程序（不再与链接绑定）现在停止它。谢谢。
没问题！嘿，这是我第一次在 iPhone 上做网络工作，所以这也是一种学习体验；）。