2

我正在尝试编写代码来区分使用 GWT 和 GWTQuery 的单击和双击。我明白了。所以我把它翻译成这样的 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;
          }
});

在这里，当单击图像时，应该会弹出一个警报，显示Single Click，如果用户双击（在 200 毫秒内），它应该会弹出Double Click。单击它可以正常工作，但是在双击时，即使弹出双击警报，单击确定以摆脱它，我发现单击警报等待被摆脱。

不知何故，我认为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;
        }
      });
4

2 回答 2

1

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

在普通的 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 绑定双击和单击单独的旅行地

引用 .dblclick() 在 jQuery 站点

不建议将处理程序绑定到同一元素的 click 和 dblclick 事件。触发的事件顺序因浏览器而异，有些在 dblclick 之前接收两个点击事件，而另一些只接收一个。双击灵敏度（被检测为双击的两次单击之间的最长时间）可能因操作系统和浏览器而异，并且通常是用户可配置的。

于 2013-03-29T18:09:28.057 回答
1

以下代码与您所说的 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");
      }
     }
  });

除非您之前将事件沉没到元素，否则不需要阻止默认片段，但在这种情况下，代码应该是：

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

已编辑：如果您希望每个匹配元素具有唯一变量，最好的方法是创建与元素一样多的函数。使用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);
     }
  });
于 2013-03-30T22:19:06.047 回答