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

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小部件替换了您的标记。还有一个Hyperlink小部件，它可以挂钩历史系统。

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

运行此项后，会显示包含文字和超链接的网页。单击它，控制台窗口中出现“抓住了点击”（我正在使用Eclipse）。

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

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

2 个答案: