时间戳

首页 > 解决方案 > 侧面板未在 DOM 外部单击（Angular 6）上的 IOS 设备中关闭

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

问题描述

在 IOS 设备上单击 DOM 时，布局侧面板正在关闭：

@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");
    }   
}

标签： angular

解决方案

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

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

推荐阅读