Mobile GWT移动/触摸屏设备-自动隐藏支持玻璃的PopupPanel在点击玻璃时触发触摸/点击底层小部件

我试图使用GWT PopupPanel（或DialogBox），启用glass和autohide，在移动设备上创建上下文操作菜单，但当用户如何关闭操作菜单弹出窗口（通过点击弹出窗口的玻璃，在内容之外触发autohide）时，我遇到了一个问题：底层小部件（“在”玻璃下面）当弹出窗口关闭时，也会收到点击事件。例如，如果该位置有一个按钮打开新视图/窗口，则单击该按钮并执行其单击处理程序

我的代码：

public void onModuleLoad() {
    Button button = new Button("Test");
    button.addClickHandler(cl -> {
        
        Label lb = new Label("This is the content");
        lb.getElement().getStyle().setBackgroundColor("#fff");
        lb.setSize("200px", "80px");

        
        DialogBox pop = new DialogBox();
        pop.setAutoHideEnabled(true);
        pop.setGlassEnabled(true);
        pop.setWidget(lb);
        pop.center();
                    
    });
    
    Button buttonBehindGlass = new Button("Test over");
    buttonBehindGlass.addClickHandler(cl -> {           
        Window.alert("Action 2");           
    }); 
    
    RootPanel.get().add(button);
    RootPanel.get().add(buttonBehindGlass);
}

在本例中，如果您打开弹出窗口，然后在“buttonBehindGlass”小部件上方的玻璃上单击/点击内容外部，您将注意到弹出窗口关闭，同时单击“buttonBehindGlass”

有没有办法避免这种情况

---

我在Android和Chrome开发工具上测试了响应/触摸模式。这个问题不会出现在桌面上，那里一切正常。

根据GWT对话框创建自己的对话框

public class DialogBoxExtended extends DialogBox {

    @Override
    protected void onPreviewNativeEvent(NativePreviewEvent event) {
        super.onPreviewNativeEvent(event);

        // check if the event does not target the popup
        Event nativeEvent = Event.as(event.getNativeEvent());
        if (!eventTargetsPopup(nativeEvent)) {
            // on click, touch end, etc. close the dialog box
            switch (event.getTypeInt()) {
            case Event.ONMOUSEDOWN:
            case Event.ONCLICK:
            case Event.ONTOUCHEND:
                hide();
                break;
            }
        }
    }

    /**
     * Does the event target this popup?
     *
     * @param event the native event
     * @return true if the event targets the popup
     */
    private boolean eventTargetsPopup(NativeEvent event) {
        EventTarget target = event.getEventTarget();
        if (Element.is(target)) {
            return getElement().isOrHasChild(Element.as(target));
        }
        return false;
    }
}

禁用自动隐藏并使用您创建的对话框

public void onModuleLoad() {
    Button button = new Button("Test");
    button.addClickHandler(cl -> {
        
        Label lb = new Label("This is the content");
        lb.getElement().getStyle().setBackgroundColor("#fff");
        lb.setSize("200px", "80px");    
        
        DialogBox pop = new DialogBoxExtended();
        pop.setAutoHideEnabled(false);
        pop.setGlassEnabled(true);
        pop.setWidget(lb);
        pop.center();
                    
    });
    
    Button buttonBehindGlass = new Button("Test over");
    buttonBehindGlass.addClickHandler(cl -> {           
        Window.alert("Action 2");           
    }); 
    
    RootPanel.get().add(button);
    RootPanel.get().add(buttonBehindGlass);
}

现在它的工作原理与预期一致

启用自动隐藏后，事件将被处理，但会被其他处理程序使用-这就是事件进入底层按钮的原因。在桌面上，这不是问题，因为正在考虑

Event.ONMOUSEUP

，但在移动/触摸模式下，会触发

事件.ONTOUCHEND