Question

尝试实现的功能 - 点击图标时的下拉菜单。单击或点击按钮或屏幕中的任何其他位置时，下拉消失。

选择的方法 -

对于按钮交互：向按钮添加事件侦听器并切换下拉高度并添加CSS高度过渡。 - ＆GT;适用于移动设备和桌面设备。

对于窗口交互：在下拉列表打开时向文档添加整体点击并点击监听器，然后在下拉列表消失时删除监听器。 - ＆GT;在桌面上运行良好，但在移动设备上不一致。

有什么不一致之处？

文档随机位置的点击是在第3或第4或第5个点击时注册的，并且非常不一致。这可以通过在桌面chrome dev选项卡上的移动chrome或移动模拟器上打开演示页来检查。

演示页： http://52.74.151.136:8080/custom_components/folder-card/demo.html

使用的代码： Polymer调用中的javascript代码如下所示。

toggleActionPane: function() {
    console.dir(this.$.actionpane);
    this.tapHandler = this.handleMyTap.bind(this);
     if (this.$.actionpane.classList.contains("hidden")) {
        this.$.actionpane.classList.remove("hidden");
        this.$.actionpane.classList.add("dropped");
        document.addEventListener('click', this.tapHandler);
        document.addEventListener('down', this.tapHandler);
    } else {
        this.$.actionpane.classList.remove("dropped");
        this.$.actionpane.classList.add("hidden");
        document.removeEventListener('click', this.tapHandler);
        document.removeEventListener('down', this.tapHandler);          
    }
},
handleMyTap: function(e) {
    console.log("Inside the document tap function");
    if (this.$.actionpane.classList.contains("dropped")) {
        this.$.actionpane.classList.remove("dropped");
        this.$.actionpane.classList.add("hidden");
        document.removeEventListener('click', this.tapHandler);
        document.removeEventListener('down', this.tapHandler);  
    }
}

需要解决方案：

代码或实现的潜在问题
如何解决我面临的问题

文档事件监听器在移动设备上不一致

0 个答案: