Question

我在somePanel上有onClick事件。然后我点击它就可以了。但是..如何检索真正的点击目标？当我点击odPanel内部的面板时，它会告诉我我点击了某个面板..

我知道我们有这个：

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

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

怎么做？

Answer 1

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

除非我在这里的问题中遗漏了一些东西。

Answer 2

我会使用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");
      }
    }
  });

Answer 3

如果您已经知道要检查的所有小部件，那么另一种方法是使用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是TextBox的子类MySpecialTextBox，您可以完成以下操作：

MySpecialTextBox widgetA;

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

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

3 个答案: