gwt - GWT - 如何检索真正点击的小部件？

Question

我在 somePanel 上有 onClick 事件。我点击它，它就可以工作了。但是..如何检索真正的点击目标？当我单击 od somePanel 内部的面板时，它显示我单击了 somePanel..

我知道我们有这个：

Element e = Element.as( event.getNativeEvent().getEventTarget());

但我返回元素 - 我想要小部件..

这个怎么做？

Answer 1

这是一个老问题，但两个答案都是错误的。如果您正在使用 GWT EventListener 并且想要作为事件源的小部件，那么您只需使用event.getSource()事件的方法并将其转换为原始对象类型。

除非我在这里的问题中遗漏了什么。

Answer 2

如果您已经知道要检查的所有小部件，另一种方法是使用 DOM.isOrHasChild(Element) 或 Element.isOrHasChild(Node)。

例如：

public void onClick(ClickEvent event) {

    Element targetElem = Element.as(event.getNativeEvent().getEventTarget());

    Widget targetWidget = null;

    if (widgetA.getElement().isOrHasChild(targetElem) {
        targetWidget = widgetA;
    }
    else if (widgetB.getElement().isOrHasChild(targetElem) {
        targetWidget = widgetA;
    }
    .....

    if (targetWidget != null) {
        // You found you widget - Yay!
    }
    else {
        // No widget found - Bummer!
    }

}

这种方法只有在您预先知道要测试的小部件时才有效。好处是您现在有一个特定的小部件引用，而不是对“某些”小部件的通用引用，您可能需要对其进行额外检查。

例如，如果 widgetA 是名为 MySpecialTextBox 的 TextBox 的子类，您可以执行以下操作：

MySpecialTextBox widgetA;

if (widgetA.getElement().isOrHasChild(targetElem) {
    widgetA.someSpecialMethod();
}

Answer 3

我将使用gwtquery中的功能来获取与给定元素关联的小部件：https ://code.google.com/p/gwtquery/wiki/GettingStarted#Manipulating_your_widgets

Widget = $(e).widget();

问题是单击的元素不能是与小部件关联的元素，而是一个子元素。在这种情况下，您可以使用 gquery 选择器遍历 dom，直到您根据某些 css 属性获得其父小部件。

// Most gwt widgets contains a class .gwt- but this could fail
// so use a more accurate selector than the one in this example
Widget = $(e).closest("[class*='.gwt-']")

如果您想自己做，请查看中的方法getAssociatedWidget为GQuery您提供解决方案：

  EventListener listener = DOM.getEventListener(e);
  // No listener attached to the element, so no widget exist for this element
  if (listener == null) {
    return null;
  }
  if (listener instanceof Widget) {
    // GWT uses the widget as event listener
    return (Widget) listener;
  }

编辑：这里有一个工作示例：

import static com.google.gwt.query.client.GQuery.*;

  // A panel with some widgets
  Panel panel = new VerticalPanel();
  final HTML widget1 = new HTML("<span>Foo</span> <span>Bar</span");
  final HTML widget2 = new HTML("<span>Foo</span> <span>Bar</span");
  final HTML widget3 = new HTML("<span>Foo</span> <span>Bar</span");
  panel.add(widget1);
  panel.add(widget2);
  panel.add(widget3);

  // we need to wrap our panel with a widget supporting click events
  FocusPanel wrapper = new FocusPanel();
  wrapper.add(panel);
  RootPanel.get().add(wrapper);

  wrapper.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
      // The element is not the HTML widget clicked but the span element
      Element e = event.getNativeEvent().getEventTarget().cast();

      // Using gquery to get the closest widget to the clicked element
      // We take advanrage of HTML widgets having gwt-HTML class
      Widget w = $(e).closest(".gwt-HTML").widget();

      if (w == widget1) {
        Window.alert("Clicked on widget 1");
      } else if (w == widget2) {
        Window.alert("Clicked on widget 2");
      } else if (w == widget3) {
        Window.alert("Clicked on widget 3");
      } else {
        Window.alert("Clicked on a non GWT HTML widget");
      }
    }
  });