GWT - 如何检索真正点击的小部件？ [英] GWT - How to retrieve real clicked widget?

问题描述

我在onPanel上有onClick事件。而我点击它，它的作品。但是..如何检索真正的点击目标？当我点击某个面板里的某个面板时，它显示出我点击了某个面板。

我知道我们有这个：

  Element e = Element.as（event.getNativeEvent（）。getEventTarget（））; 
  

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

如何做到这一点？

解决方案

我会在 gwtquery 以获取与给定元素关联的小部件： https://code.google.com/p/gwtquery/wiki/GettingStarted#Manipulating_your_widgets

  Widget = $（e）.widget（）; 
  

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

code> //大多数gwt小部件包含一个类.gwt-但是这可能会失败
//所以使用比本例中更精确的选择器
Widget = $（e）.closest （[class * ='。gwt-']）

如果您想要看看 GQuery 中的方法 getAssociatedWidget 给出了解决方案：

EventListener listener = DOM.getEventListener（e）;
//没有监听器附加到元素，所以没有这个元素的构件
if（listener == null）{
return null;
}
if（listener instanceof Widget）{
// GWT使用小部件作为事件监听器
return（Widget）listener;



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

  import static com.google.gwt.query.client.GQuery。*; 
 
 //带有一些小部件的面板
面板面板=新的VerticalPanel（）; 
 final HTML widget1 =新HTML（< span> Foo< / span>< span>栏< / 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）; 
 
 //我们需要用一个支持点击事件的小部件来包装我们的面板
 FocusPanel wrapper = new FocusPanel（）; 
 wrapper.add（panel）; 
 RootPanel.get（）。add（wrapper）; 
 
 wrapper.addClickHandler（new ClickHandler（）{
 public void onClick（ClickEvent event）{
 //元素不是单击的HTML小部件，但span元素
元素e = event.getNativeEvent（）。getEventTarget（）。cast（）; 
 
 //使用gquery获得最接近的小部件到被单击的元素
 //我们采用HTML的advanrage具有gwt-HTML类的窗口小部件
 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（Click on a non GWT HTML widget）; 
} 
} 
}）; 
  

I have onClick event on somePanel. And I click on it and it works. But.. How to retrieve real click target? When I click on panel which is inside od somePanel it show me that I click on somePanel..

I know we have this:

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

But i returns element - I want widget..

How to do this?

解决方案

I would use the feature in gwtquery to get the widget associated with a given element: https://code.google.com/p/gwtquery/wiki/GettingStarted#Manipulating_your_widgets

Widget = $(e).widget();

The problem is that the element clicked couldn't be the element associated with the widget but a child. In this case you could use gquery selectors to traverse the dom until you get its parent widget based on some css property.

// 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-']")

If you wanted to do it by yourself, taking a look to the method getAssociatedWidget in GQuery gives you the solution:

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

EDITED: here you have a working example:

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

这篇关于GWT - 如何检索真正点击的小部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！