Question

我正在尝试在文本区域（gxt）上设置一个处理程序，以便在用户到达文本区域顶部时了解。

TextArea logTextArea = new TextArea();
logTextArea.setReadOnly(true);
logTextArea.addDomHandler(new ScrollHandler() {

    @Override
    public void onScroll(ScrollEvent event) {
        InputElement textAreaElement = logTextArea.getCell().getInputElement(logTextArea.getElement());
        int scrollTop = textAreaElement.getScrollTop();
    }
}, ScrollEvent.getType());

VerticalLayoutContainer dataContainer = new VerticalLayoutContainer();

HorizontalLayoutContainer secondRow = new HorizontalLayoutContainer();
secondRow.add(logTextArea, new HorizontalLayoutData(1, 1, new Margins(5, 10, 5, 10)));

dataContainer.add(secondRow, new VerticalLayoutData(1, 0.5));

add(dataContainer);//this class extends ContentPanel

这个处理程序永远不会在滚动时调用，但我也尝试过很多其他事件，比如mouseover，mousewhell，mouseclick ......并且所有这些事件都有效。有人可以帮忙解决任何问题吗？

Answer 1

AFAIK，如果事件的目标和窗口小部件不是相同的元素，则滚动事件在基于单元格的窗口小部件中不起作用。而GXT的TextArea是一个具有这种DOM结构的小部件。

这就是因为滚动事件是一个“非冒泡”的事件。使用单元格的AFAIK GWT小部件对通过GWT事件系统分派的非冒泡事件进行特殊处理。支持非冒泡事件的类型列表太短，仅限于focus，blur，load和error事件。有关详细信息，请参阅CellBasedWidgetImplStandard课程。

我建议的第一个解决方案是为textarea显式分配onscroll处理程序。例如：

Event.sinkEvents(textAreaElement, Event.getEventsSunk(textAreaElement) | Event.ONSCROLL);

此处textAreaElement - 是textarea DOM元素。

但是，每当单元格重新呈现其内容时（例如，当调用TextArea小部件的setValue方法时），就应该这样做。

其他解决方案有点hacky并使用私有api实现，但只能应用于基于单元格的小部件一次。您可以执行与CellBasedWidgetImplStandard.sinkEvent(Widget, String)中相同的操作，例如WidgetHelper.sinkEvent(logTextArea.getElement(), BrowserEvents.SCROLL);。：

WidgetHelper

其中public class WidgetHelper { public static void sincEvent(Element element, String typeName){ element.setAttribute("__gwtCellBasedWidgetImplDispatching" + typeName, "true"); sinkEvent0(element, typeName); } private static native void sinkEvent0(Element element, String typeName) /*-{ element.addEventListener(typeName, @com.google.gwt.user.cellview.client.CellBasedWidgetImplStandard::dispatchNonBubblingEvent, true); }-*/; }可能如下所示：

// call it like this
this.viewer()

...

const me = gql`
    query user
    {
        viewer
        {
            _id
            name
            email
            gender
            birthday
            picture
            role
            facebookId
            facebookEmail
            token
        }
    }
`

export default compose(
  graphql(login, {name : 'authorizeUser'}),
  graphql(logout, {name : 'deauthorizeUser'}),
  graphql(me),
)(App);

可能这是在GWT项目中创建问题的主题。

GXT - 无法访问文本区域上的onscroll事件处理程序

1 个答案: