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

Question

我正在评估 GWT 作为为我未来的项目开发 AJAX 应用程序的替代方案之一。到目前为止，它已经是最好的了，但现在我一直在寻找一种方法来捕获 HTML 小部件内标签的点击。我想在 HTML 中编写链接，但我想在应用程序中处理点击，而不需要重新加载页面。假设我有以下 HTML：

GWT 是一个很棒的工具，我认为它将成为我开发 Web 应用程序的首选工具。要查看我的示例，请单击此处

我想捕获对文本的“单击此处”部分的点击。到目前为止，我所做的就是尝试将 id“mylink”附加到某种可点击的小部件，并使用该小部件的 ClickHandler 处理点击，但没有任何效果。

有办法做到这一点吗？顺便说一句，我对Javascript知之甚少。

先感谢您。

Answer 1

您也可以这样做：

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

DOM 类是 com.google.gwt.user.client.DOM。

---

评论后编辑。

好的，该方法适用于 GWT 小部件之外的元素（元素附带 HTML 文件）。如果您需要在 GWT 代码中生成它，那么您可以单独添加链接元素。但如果您的内容来自数据库，那么它就不起作用。

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

Answer 2

尝试这样的事情。

对于您的网页，您可以使用 UiBinder：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <g:HTMLPanel ui:field="panel">
        <p>
            GWT is a great tool and I think it will be my preferred tool to
            develop web applications. To check out my samples
            <g:Anchor ui:field="myLink" text="click here" />
        </p>
    </g:HTMLPanel>
</ui:UiBinder> 

请注意，我已将您的标签替换为 Anchor 小部件。还有一个超链接小部件，它可以连接到历史记录系统。

锚点的 id 为“myLink”，它在 XML 文件的 GWT 配套中使用：

public class So extends Composite {

    private static SoUiBinder uiBinder = GWT.create(SoUiBinder.class);

    interface SoUiBinder extends UiBinder<Widget, So> {
    }

    @UiField
    Anchor myLink;

    public So() {
        initWidget(uiBinder.createAndBindUi(this));

        myLink.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                GWT.log("caught the click");
            }
        });
    }

}

我添加了一个 ClickHandler 来捕获单击事件并对其进行操作。

主程序很简单：

public class SOverflow implements EntryPoint {

    public void onModuleLoad() {

        RootLayoutPanel.get().add(new So());
    }
}

运行此程序后，会出现一个带有文本和超链接的网页。单击它，控制台窗口中会出现“caught the click”（我使用的是 Eclipse）。

我希望这就是你所追求的。如果不完全正确，它至少可以给您一些如何解决问题的想法。