Question

我正在尝试编写一个代码来区分使用GWT和GWTQuery的simgle和双击。我明白了here。所以我把它翻译成GWT :(我的应用程序不能有全局变量，所以我用元素属性做了那个部分）：

$("img").live("click", new Function() {
         public boolean f(Event event) {
            String clicksString = $(event).attr("clicks");
            int clicks = Integer.parseInt(clicksString);
            clicks++;
            $(event).attr("clicks",String.valueOf(clicks));
            Timer t = new Timer() {

                @Override
                public void run() {
                    Window.alert("Click");
                    $(event).attr("clicks","0");
                }
            };

            if (clicks == 1) {
              t.schedule(200);
            }

            else {
              t.cancel();
              $(event).attr("clicks","0");
              Window.alert("Double Click");
            }
            return true;
          }
});

此处，点击图片时，会弹出一个警告，显示单击，如果用户双击（200毫秒内），则会弹出双击。单击即可正常工作，但双击即使弹出双击警告，点击确定即可摆脱它，我发现单击警告等待摆脱。

不知何故，我认为t.cancel()没有在双击时触发。有谁能告诉我如何解决这个问题？

更新

接受的解决方案适用于警报，但是当我还需要event参数时，必须稍微调整一下。在这样做之后，问题再次出现，计时器未被清除，现在我收到两个警报，双击和点击 ..：

          $("img").live("click", new Function() {
              int clicks = 0;

            public boolean f(Event event) {

                  Timer t = new Timer() {

                    @Override
                    public void run() {
                        clicks = 0;
//                            Here I need the event paramater

                    }
                };
                if (clicks++%2 == 0) {
                    t.schedule(5000);
                }
                else {
                    t.cancel();
                    clicks = 0;
 //                       Here also I need the event paramater
                }
                return true;
            }
          });

由@Manolo更新：根据我在下面的评论，最后的代码应为：

      $("img").live("click", new Function() {
        int clicks = 0;
        Event event;
        Timer t = new Timer() {
           @Override
            public void run() {
               // Use the event
               event....
            }
        };
       public boolean f(Event event) {
            this.event = event;
            if (clicks++%2 == 0) {
                t.schedule(5000);
            } else {
                t.cancel();
                // Use the event
                event....
            }
            return true;
        }
      });

Answer 1

你觉得GWT的DoubleClickEvent是不够的吗？为什么不听Dom的双击事件而不是点击事件，即使你采取GwtQuery？使用计时器是区分双击的非常糟糕的方法。

在普通GWT双击中将是 -

public void onModuleLoad() {
    final Image button = new Image("http://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Katrina_Kaif.jpg/220px-Katrina_Kaif.jpg");

    button.addDoubleClickHandler( new DoubleClickHandler() {
        @Override
        public void onDoubleClick(DoubleClickEvent event) {
            Window.alert("DoubleClick");
        }
    });
    button.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            Window.alert("Click");
        }
    });
    RootPanel.get("slot1").add(button);
}

在GwtQuery中，您可以尝试使用'dblclick'

$("img").live("dblclick", new Function() {
// Your code....
}

更新

你可能不得不从Jquery社区借用解决方案。这似乎是jquery社区的一个旅行基地@ Jquery bind double click and single click separately

在jQuery网站上引用.dblclick（）

将处理程序绑定到同一元素的click和dblclick事件是不明智的。触发的事件序列因浏览器而异，有些事件在dblclick之前接收到两个点击事件，而其他事件只接收一个事件。双击敏感度（双击检测到的点击之间的最长时间）可能因操作系统和浏览器而异，通常可由用户配置。

Answer 2

以下代码与您说的jsfiddle示例完全相同：

  $("img").click(new Function() {
    boolean b = false;
    Timer t = new Timer() {
      public void run() {
        Window.alert("Click");
      }
    };
    public void f() {
      if (b = !b) {
        t.schedule(200);
      } else  {
        t.cancel();
        Window.alert("Double Click");
      }
     }
  });

除非您以前是该元素的沉没事件，否则不需要使用prevent默认片段，但在这种情况下，代码应为：

  $("img").dblclick(new Function() {
    public boolean f(Event e) {
      return false;
    }
  });

<强> EDITED ：如果您希望每个匹配元素具有唯一变量，最好的方法是创建与元素一样多的函数。使用GQuery.each()是更简单的方法：

  $("img").each(new Function() {
    public void f() {
      $(this).click(new Function() {
        boolean b = false;
        Timer t = new Timer() {
          public void run() {
            Window.alert("Click");
          }
        };
        public void f() {
          if (b = !b) {
            t.schedule(200);
          } else  {
            t.cancel();
            Window.alert("Double Click");
          }
         }
      });
  }});

你甚至可以只使用一个函数并在元素中存储变量，但是你不仅要存储你在查询中假装的计数器，还要存储每个元素的计时器：

  $("img").click(new Function() {
    public void f() {
      boolean b = $(this).prop("c", Boolean.class);
      Timer t = $(this).prop("f");
      if (t == null) {
        t = new Timer() {
          public void run() {
            Window.alert("Click");
          }
        };
        $(this).prop("f", t);
      }
      if (b = !b) {
        t.schedule(200);
      } else  {
        t.cancel();
        Window.alert("Double Click");
      }
      $(this).prop("c", b);
     }
  });

GWT计时器取消不起作用

2 个答案:

更新