12

我用 jquery mobile '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>

更具讽刺意味的是，当我通过 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>

我无法解释为什么正文和标题部分的位置会有所不同。

4

8 回答 8

15

我忘记了我在哪里看到的，但问题是 jQuery Mobile 绑定到触摸和鼠标事件以模拟“点击”，并且在某些情况下 Android 会触发两者。

对我有用的技巧是preventDefault在事件处理程序中调用事件。这将防止重复事件触发。

至于为什么只是有时会出现这种情况，我知道如果有人不听触摸版本，移动浏览器只会尝试触发事件的鼠标版本。检测或 jQuery 的委托可能存在使启发式方法混淆的问题。

于 2012-12-01T18:23:04.517 回答
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/01/ghost-clicks-in-jquery-mobile/

在第一个链接中，您会发现一个可以解决问题的技巧。据我所知，没有简单的解决方案:(

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

于 2012-05-29T07:12:21.683 回答
5

来自jQuery Mobile 页面：

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

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

于 2012-05-29T06:42:20.030 回答
2

与这个问题相关，我在另一个事件之后得到了两个事件“点击”和“点击”。这里的所有想法都很鼓舞人心，但我最终找到了另一个解决方案。我将以下代码添加到我的 JavaScript 控制器中，以根据时间戳区分连续的重复事件，幸运的是，这两个重复事件完全相同。基本上，如果我决定使用该事件，我所做的是存储上次使用的时间戳。第二次具有相同时间戳的事件我只是丢弃了它。

var _lastEventTimestamp;
var checkAndPreventDuplicatedEvent = function (e) {
    if (e.timeStamp === _lastEventTimestamp) return true;
    else _lastEventTimestamp = e.timeStamp;
    return false;
}

然后，在我的每个处理程序中，我在开头添加了这个过滤代码：

var onTapSomething = function (e) {
   if (checkAndPreventDuplicatedEvent(e)) return;        
   //do here whatever you would do in the case of legitimate event...   
}

于 2015-02-04T18:35:42.170 回答
1 
$("#buttonID").tap(function(event){
        if(localStorage.JQMGostClick == 0 || localStorage.JQMGostClick == "" || typeof(localStorage.JQMGostClick) === "undefined")
            localStorage.JQMGostClick = 1;
        else if(localStorage.JQMGostClick == 1){
            localStorage.JQMGostClick = 0;
            return false;
        }
.....
});

它对我有用，因为如果您使用的是移动环境，那么您可能正在使用一种存储

于 2013-10-20T00:31:31.070 回答
0

这可能不是最好的解决方案，只在某些情况下有效，但对我有用的是在点击事件开始后立即将该元素的 CSS“指针事件”设置为“无”。然后使用 JS 的 setTimeout 在 500 毫秒后将“指针事件”重置为自动。

对我来说，300 毫秒对于 Android 设备来说已经足够了，但 iPhone 需要 500 毫秒来防止双击。

function yourEvent(evt){

  $(el).css('pointer-events', 'none');
  
  setTimeout(function(){
      $(el).css('pointer-events', 'auto');
  }, 500);
  
  //do you stuff

}

于 2014-11-04T06:14:35.260 回答
0

我发现在我的情况下，添加data-role="page"到我的页面容器可以防止点击事件被触发两次。

于 2012-12-18T16:57:56.403 回答
0

我以前经历过这样的事情，这是因为我的表格不在一个data-role="page"

我的建议是用 jQuery Mobile html 结构包装你的代码，这样你的代码应该看起来像这样

<div data-role="page" class="ui-page ui-page-theme-a ui-page-active">
  <div class="ui-content">
    <div id="box">
        tapped me
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box').bind('tap',function(event) {
                alert('why');
            }); 
        });
    </script>
   </div>
</div>
于 2014-04-07T19:24:12.823 回答