logo标签列表

jQuery click - 防止移动设备上的多次点击

jquerymobileonclickphonegap-build
7
我正在使用Phonegap构建我的iOS/Android应用程序 - 基本上是一个可以模拟我的笔记本电脑键盘上的几个按键的遥控器。 (用于控制视频播放等)。
由于它是一个网页，我有一些图像，当单击时连接到我的Java Socket服务器。我面临的问题是，每次我点击一个按钮 - 只是一次（比如暂停按钮），我在java控制台中看到多个请求被触发。
但是这仅发生在我手机上点击（触摸）时。当我尝试在我的笔记本电脑浏览器中做同样的操作时，它的行为符合预期（只有一个请求）。
我查阅了几篇文章，其中一般建议使用'unbind()'和'off()'，但没有任何作用。下面是代码片段。
$("#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); 
            ...

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

我不明白为什么会这样，也不确定如何防止这种情况发生。有什么建议吗？

5个回答
1
另一种解决此问题的方法是使用一个标志，当您单击按钮时可以设置该标志。然后，您可以检查标志的值，并在值已经设置的情况下返回false;。
// 伪代码 - 最初将标志保持为false。 - 单击时，检查标志值。 -- 如果标志已设置，则返回false; -- 如果标志未设置，则设置标志。 - 一旦调用成功方法，再次将值重置为false。
这将至少解决多个调用的问题。另一个练习是确定为什么这只是在设备上出现问题。
0

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

  1. 尝试将 $("#play").off('click'); 放置在回调函数（success 或 complete）中，而不是使用 ~off().on('click')~。

  2. 在回调函数中加入 return false;。

如果这些解决方案都不能解决问题，我认为唯一留下的最佳解决方案是仅对移动用户使用ontouchstart和ontouchend。 - Inpyo Jeon
0
使用console.log("called")来检查按钮被调用的次数。在Chrome浏览器中，可以通过查看-> 开发者工具-> JavaScript控制台来查看输出。alert("Play");只会运行一次。
我只能在浏览器中尝试这个；我尝试了它，但每次点击只出现一次。但是从浏览器中，我已经验证事件只被调用了一次。 从我的手机上，这种情况发生了不止一次...因此会弹出警报。我不知道如何在我的手机上进行调试。 - Krish
你用的是什么手机？安卓还是iPhone？ - Jean Pierre
我正在使用一部iPhone 6s。 - Krish
好的，你有几个选项。如果你有一台Mac（不确定在Windows上是否可行），请通过电缆将你的iPhone连接到电脑上，在Safari中转到“偏好设置”->“高级”，确保“菜单栏中显示开发菜单”已打开。然后在“开发”下面，你会看到你的手机。 - Jean Pierre
0

我在使用jQuery时也遇到过类似的问题，即在单击中调用了两次模态框。后来我意识到问题是我在document.ready代码之外调用事件。

尝试这些方法。因此，不要将

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

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

可以尝试这种方式：

$(function(){
    ...

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

你可以使用 .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标签中添加以下内容：
<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) {}
    });
});

希望这能有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接