Question

我正在使用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)
        { }
    });
});

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

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

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); 
            ...

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

我不明白为什么，也不确定如何防止它。有什么指针吗？

Answer 1

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

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

这至少可以解决多次调用的问题。另一个练习是确定仅在设备上出现问题的原因。

Answer 2

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

Answer 3

也许你已经尝试过这些解决方案了，但万一你没有，

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

Answer 4

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

试试这些。所以没有

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

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

以这种方式尝试：

$(function(){
    ...

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

Answer 5

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

您的代码将类似于：

<body onload="onBodyLoad()">

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

<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) {}
    });
});

最后，您可以添加一个标志，以确定之前是否发生过点击。所以你的代码看起来像这样：

in

我希望这会有所帮助。

jQuery点击 - 阻止移动设备中的多次点击

5 个答案: