GWT 中的“更改”浏览器事件

Question

我在 GWT 中创建表，其中一列包含具有输入的单元格。我想在输入中的文本更改时获取信息。在我的单元格中，我重载了 render() 和 onBrowserEvent() 方法。代码如下：

public HourPickerCell() {
    super("change", "keyup");
}

@Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
    if (value == null) {
        return;
    }
    sb.appendHtmlConstant("<input class=\"hourPicker\" type=\"text\" value=\"" + value + "\"></input>");        
}


@Override
public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) {
    System.out.println(event.getType());
    super.onBrowserEvent(context, parent, value, event, valueUpdater);

    if (event.getType().equals("change")) {
        EventTarget eventTarget = event.getEventTarget();
        if (!Element.is(eventTarget)) {
            return;
        }
        if (parent.getFirstChildElement().isOrHasChild(Element.as(eventTarget))) {
            InputElement input = (InputElement) parent.getFirstChild();
            valueUpdater.update(input.getValue());
        }
    }       
}

如您所见，我尝试捕捉 change 事件。在 Firefox 和 chrome 上一切正常。当我在输入中写一些东西，然后按到其他单元格时，我会在控制台中得到以下结果：

keyup keyup keyup keyup keyup keyup keyup change keyup

其中一个事件是“改变”——这就是我所需要的。不幸的是，在 Internet Explorer 上我只收到：

keyup keyup keyup keyup keyup keyup keyup

没有更改事件。 谁能告诉我问题出在哪里？有什么办法可以解决吗？

Answer 1

在 Internet Explorer 中，change 事件不会冒泡 [1]，因此您必须在 input 元素上监听事件。其他浏览器都实现了 HTML5 行为，其中 change 事件冒泡 [2]。

我不知道正确的修复方法，但您可能最好使用或复制 TextInputCell，它已经完成了所有艰苦的工作。

[1]http://msdn.microsoft.com/en-us/library/ie/ms536912(v=vs.85).aspx
[2]http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-change

---

附带说明，您的 render 方法不安全（如果 value 包含引号怎么办？）您可能想要使用 SafeHtmlUtils 或 SafeHtmlTemplates（请参阅 TextInputCell 的代码)