单击（Angular 6）外部DOM上的IOS设备中的侧面板未关闭

Question

单击DOM时，布局侧面板关闭，但IOS设备除外：

@ViewChild('closeContainer') LeftMenuObj;

@HostListener('document:click', ['$event']) clickedOutside($event)
{

    if (this.LeftMenuObj != undefined && this.LeftMenuObj != null 
                 && !this.LeftMenuObj.nativeElement.contains($event.target)) 
    {
        console.log('click outside');
        document.getElementById("LeftMenu").classList.add("hide");
    }
    else if (this.LeftMenuObj != undefined && this.LeftMenuObj != null 
              && this.LeftMenuObj.nativeElement.contains($event.target)) 
    {
        console.log('click inside');
        document.getElementById("LeftMenu").classList.remove("hide");
    }   
}

Answer 1

因为您说它可以在所有其他设备上运行并且您的代码看起来还可以，所以我认为问题的根源是原始元素的边界。 这意味着，对于要在其元素上查询样式的IOS设备，要在其上检测外部点击，其宽度或高度设置为比其他媒体查询大。 或者包装上的填充物。 为了进行检测，我建议将红色等背景色放置在元素上，将蓝色背景色放置在父包装上。 这样，您可以检测元素的边界在哪里，以及是否真正单击“外部”还是仍在其上。 通过将其放在style.css中，还有一种极好的调试和查看边界的方法：

color: red !important;
outline: solid limegreen 1px !important;
background: black !important;