jQuery click - 防止移动设备中的多次点击答案

【问题标题】：jQuery click - prevent multiple clicks in mobilejQuery click - 防止移动设备中的多次点击
【发布时间】：2016-10-09 02:52:42
【问题描述】：

我正在使用 Phonegap 来构建我的 iOS/Android 应用程序 - 基本上是一个可以模拟笔记本电脑键盘上的几个键的遥控器。（控制视频播放等）。

因为它是一个网页，所以我有一些图像，当单击它们时，它们会连接到我笔记本电脑上的 Java Socket 服务器。我面临的问题是，每次我单击一个按钮 - 仅一次（如暂停按钮），我看到在 java 控制台中触发了多个请求。但这只有在我点击（触摸）手机时才会发生。当我在笔记本电脑的浏览器中尝试相同的操作时，它的行为符合预期（只有一个请求）。

我浏览了几篇帖子，一般建议是使用“unbind()”和“off()”，但似乎没有任何效果。代码 sn-p 如下。

$("#play").off().on('click',function(){
        //alert("Play");

    jQuery.ajax({
    type: "GET",
    async: true,
    url: 'http://'+ip+':10007/function=play?',
    success: function (msg) 
        {  },
    error: function (err)
        { }
    });
});

我使用该警报来检查事件是否被多次触发。警报仅弹出一次，这意味着该事件仅触发一次。所以它只是一次点击（触摸）=>一个事件=>但是多个请求！

我正在用这段代码检查服务器响应：

while(true) {                
      Socket sock = servsock.accept();                
      System.out.println("Connection from: " + sock.getInetAddress());                
      Scanner in = new Scanner(sock.getInputStream());                
      PrintWriter out = new PrintWriter(sock.getOutputStream());                
      String request = "";                
      while (in.hasNext()) {
          request = in.next( );                
          if (request.contains("function="))
          {
            inputLine = request.split("function=")[1];
            System.out.println ("^^^^^" + inputLine); 
            ...

当从移动设备请求时，输出会在控制台中出现三次，但当从我的笔记本电脑的浏览器发出请求时，只会出现一次。

我不明白为什么，也不知道如何预防。有什么指点吗？

【问题讨论】：

标签： jquery mobile onclick phonegap-build

【解决方案1】：

解决此问题的另一种方法是使用单击按钮后可以设置的标志。然后您可以检查标志的值并返回 false；如果该值已设置。

// 伪代码
- 最初保持标志为假。
- 单击时，检查标志值。
-- 如果设置了标志，则返回 false；
-- 如果未设置标志，则设置标志。
- 调用成功方法后，再次将值重置为 false。

这至少可以解决多次调用的问题。另一个练习是确定为什么这只是设备上的问题。

【讨论】：

【解决方案2】：

使用console.log("called") 检查按钮被调用的次数。在 chrome 中查看输出在 view->Developer->javaScript 控制台下。 alert("Play"); 只会运行一次。

【讨论】：

我只能在浏览器中尝试；我试过它每次点击只出现一次。但是从浏览器中我已经验证了该事件只被调用一次。在我的手机上，这种情况不止一次发生......因此发出警报。我不知道如何在我的手机中调试。
你用的是什么手机？安卓还是 iPhone？
我使用的是 iPhone 6s
好的，你有几个选择如果你有一个 mac（不确定它是否在 windows 上工作）通过电缆将你的 iPhone 连接到计算机，然后在 safari 中转到首选项 -> 高级并确保在菜单栏中显示开发菜单已打开。然后在开发中你会看到你的手机。

【解决方案3】：

我在使用 jQuery 时也有过类似的体验，其中一次单击调用了两次模态。然后我意识到问题在于我在document.ready 代码之外调用了事件。

试试这些。所以不要有

$(function(){
    ...
});

$("#play").off().on('click',function(){
    ...
});

试试这个方法：

$(function(){
    ...

    $("#play").off().on('click',function(){
        ...
    });
});

【讨论】：

【解决方案4】：

触发一次点击事件的一种方法是使用.one() 而不是.on()。这将确保事件被触发一次。 AJAX 请求完成后，您可以再次附加 .one() 函数。

您的代码将类似于：

function processOnce() {
    //alert("Play");

    jQuery.ajax({
        type : "GET",
        async : true,
        url : 'http://' + ip + ':10007/function=play?',
        success : function (msg) {
            $("#play").one('click', processOnce());
        },
        error : function (err) {}
    });
}

$("#play").one('click', processOnce());

另一种可能的解决方案是等待 deviceready 事件。所以在你的身体标签中添加这个：

<body onload="onBodyLoad()">

对于脚本：

<script type="text/javascript">
   function onBodyLoad() {
      document.addEventListener("deviceready", onDeviceReady, false);
   }

   function onDeviceReady() {
      $(function() {
         // bind your elements
      });
   }

最后，您可以添加一个标志来确定之前是否发生过点击。所以您的代码将如下所示：

var clicked = false;

$("#play").on('click', function () {
    if (clicked)
        return;

    clicked = true;
    //alert("Play");

    jQuery.ajax({
        type : "GET",
        async : true,
        url : 'http://' + ip + ':10007/function=play?',
        success : function (msg) {
            clicked = false;
        },
        error : function (err) {}
    });
});

我希望这会有所帮助。

【讨论】：

【解决方案5】：

也许您已经尝试过这些解决方案，但如果您还没有尝试过，

尝试将$("#play").off('click');放在回调函数中（成功或完成）而不是~off().on('click')~。
将return false; 添加到回调中。

【讨论】：

+ 如果这些解决方案都不能解决问题，我认为最好的解决方案是仅针对移动用户使用 ontouchstart 和 ontouchend