Phonegap中的tap事件

Question

我发现在我的最近项目中，当我“点击”一个元素时，它会触发两次。例如：

......

<div id='target'></div>   
......


<script>

  $('#target').click(function(){alert('touched!')});

</script>

然后它将会触发两次"touched"的警报！！！

我认为如果我使用手势库就可以解决这个问题，所以我尝试了Hammer.js。但似乎问题仍无法解决。我对此感到困惑，并真诚地希望有人能给我一些建议。谢谢！！！

- jabez128

Answer 1

尝试这个。

   <script>
    $(document).ready(function(){
      $('#target').click(function(){alert('touched!')});
    });
    </script>

seeeJs Fillde

（注意：原文中 “Js Fillde” 应为 “JSFiddle”，可能是拼写错误）

- Satish Sharma

Answer 2

试试这个

$(document).ready(function(){
      $('#target').unbind('click');
      $('#target').bind('click',function(event){
          alert('touched!')
      });
});

有时，由于绑定了多次，事件触发会发生多次。在 绑定 之前尝试 解除绑定。

- Harsha Venkataramu

Answer 3

当使用PhoneGap进行项目开发时，我遇到了类似的问题（我认为这个问题主要出现在Android Jelly Bean设备上）。所以我做了以下操作：

var isEvent = false;

$(document).ready(function(){

 $(element).click(function(){
    if(!isEvent){
      isEvent = true;
      doSomething();
    }
    setTimeout(function(){isEvent=false;},50); // time in ms should be set according to your needs
 });
});

当时这是唯一一个百分之百有效的解决方案。

- Cԃաԃ

---

我在我的安卓设备上尝试了你的代码，但它又失败了！！！我真的不知道该如何修复它..... - jabez128

Answer 4

在现代浏览器中，您只需使用touchstart和touchend即可。

document.addEventListener('touchstart', function(){
  alert('touch started at ' + Date.now() );
}, false);
document.addEventListener('touchend', function(){
  alert( 'touch ended at ' + Date.now() );
});

您可以在Chrome开发者工具中设置触摸设备来测试触摸事件。不确定其他浏览器是否也支持此功能。

- mtizziani

Answer 5

试试这个：

$(document).on('pageinit', 'page_id', function(){
     $('#target').click(function(){alert('touched!')});
});

- Balaji SS