如何在GWT中的HTML小部件内的链接上捕获click事件？

Question

我正在评估GWT作为我未来项目开发AJAX应用程序的替代方案之一.直到它现在它一样好,但现在我一直在寻找一种方法来捕获HTML小部件内的标签上的点击.我想在HTML中编写链接,但我想在我的应用程序中处理点击,而不是重新加载页面.想象一下,我有以下HTML:

<p>GWT is a great tool and I think it will be my preferred tool to develop web applications. To check out my samples <a id='mylink'>click here</a></p>

我想捕获文本"点击此处"部分的点击.我到目前为止所做的是尝试将id"mylink"附加到某种可点击的窗口小部件,并使用该窗口小部件的ClickHandler处理该点击,但没有任何工作.

有没有办法做到这一点？顺便说一句,我对Javascript知之甚少.

先感谢您.

Answer 1

你也可以这样做:

Anchor.wrap(DOM.getElementById("mylink")).addClickHandler(yourClickHandler);

DOM上课是com.google.gwt.user.client.DOM.

评论后编辑.

好的,该方法适用于GWT小部件中的元素(元素附带HTML文件).如果需要在GWT代码中生成它,则可以单独添加link元素.但是,如果您的内容来自数据库,那么它将无效.

HTMLPanel html = new HTMLPanel("GWT is a great tool and I think it will be my preferred tool to develop web applications. To check out my samples ");`
Anchor a = new Anchor("click here");
a.addClickHandler(yourClickHandler);
html.add(a);

如果它是完全动态的,我现在还不知道.我正在尝试使用HTML()小部件,您可以在其中插入您的点击处理程序,但我找不到正确的方法来确定点击是否在A元素中.奇怪.

最后的方法(我希望)

这个应该最终工作.我认为这是应该做的方式,特别是它允许任何HTML结构.有两种方式:

1.转换HTMLPanel中的链接

这个将找到所有A元素并将它们转换为锚点.它会忽略href属性,但你可以轻松添加它:)

HTMLPanel html = new HTMLPanel("<p>Multilink example 2: <a>link1</a> and <a>link2</a></p>");
NodeList<Element> anchors = html.getElement().getElementsByTagName("a");
for ( int i = 0 ; i < anchors.getLength() ; i++ ) {
    Element a = anchors.getItem(i);
    Anchor link = new Anchor(a.getInnerHTML());
    link.addClickHandler(...);
    html.addAndReplaceElement(link, a);
}

2.将链接插入准备好的点

只需插入占位符,即应插入小部件.您也可以使用该addAndReplaceElement()方法,但使用字符串ID.

Anchor a1 = new Anchor("a1");
a1.addClickHandler(...);
Anchor a2 = new Anchor("a2");
a2.addClickHandler(...);

HTMLPanel html = new HTMLPanel("<p>Multilink example: <span id='a1'></span> and <span id='a2'></span></p>");
html.add(a1, "a1");
html.add(a2, "a2");