触发jQuery移动点击事件两次

Question

触发jQuery移动点击事件两次

我用jquery移动'tap'事件进行测试,发现每次触发都会触发两次.html页面的代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>      
    <style>
        #box{
            background-color:red;
            width:200px;
            height:200px;
        }   
    </style>
</head>
<body>
    <div id="box">
        tapped me
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box').bind('tap',function(event) {
                alert('why');
            }); 
        });
    </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

更具有讽刺意味的是,当我测试这个过的jsfiddle,它只是引发该事件的一个时间.

这是链接. http://jsfiddle.net/mochatony/tzQ6D/6/

经过进一步测试后,我发现将javascript放在标题部分已经消失了.

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js">
    </script>
    <style type="text/css">
        #box{ background-color:red; width:200px; height:200px; }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box').bind('tap', function(event) {
                alert('halo');
            });
        });
    </script>        
</head>
<body>
    <div id="box">
        tapped me
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我无法解释为什么身体和标题部分的位置使这个不同.

Answer 1

Fio*_*ins 15

我忘了在哪里看到这个,但问题是jQuery Mobile绑定到触摸和鼠标事件以模拟"点击",并且在某些情况下Android会同时触发.

对我有用的技巧是preventDefault在事件处理程序中调用事件.这将使重复事件无法触发.

至于为什么只是有时这种情况,我知道如果有人没有收听触摸版本,移动浏览器将尝试仅触发事件的鼠标版本.检测或jQuery的委派可能存在一个问题,即启发式混淆.

太奇妙了!在我的情况下,我把'e.preventDefault();**放在`$('.selector').on('click touchstart',function(e){})`函数和魔法发生的所有动作之后.W/o**e.preventDefault();**touchstart事件导致双击/点击.非常感谢你,伙计! (2认同)

Answer 2

tib*_*ibo 9

您正在遇到鬼点击问题...这是一个已知的"错误",很难解决.

那里有更多的信息:

http://forum.jquery.com/topic/tap-fires-twice-with-live-tap https://developers.google.com/mobile/articles/fast_buttons http://philosopherdeveloper.wordpress.com/2011/ 11月1日/重影的点击功能于jquery的移动/

在第一个链接中,你会发现一个可以解决问题的黑客攻击.据我所知,没有简单的解决方案:(

顺便说一句:即使它不能解决你的问题,@ Sagiv也是对的.JQuery mobile经常使用ajax来更改页面,因此不会触发document.ready事件.

Answer 3

Sag*_*fek 5

来自jQuery Mobile页面:

重要:使用$(document).bind('pageinit'),而不是$(document).ready()
你在jQuery中学到的第一件事就是在$(document).ready()函数中调用代码,这样一切都会执行加载DOM后立即加载.但是,在jQuery Mobile中,Ajax用于在导航时将每个页面的内容加载到DOM中,而DOM ready处理程序仅针对第一个页面执行.要在加载和创建新页面时执行代码,您可以绑定到pageinit事件.此事件在本页底部详细说明.

所以跳过$(document).ready().更多信息在这里.

谢谢你的答复.使用pageinit进行了测试,pageinit事件也被触发了两次.我测试了firefox和chrome.对我来说似乎很奇怪. (2认同)

归档时间：	14 年前
查看次数：	16970 次
最近记录：	11 年，3 月前