Window.click 事件不会在 IOS Safari 上触发 - 仅限 JavaScript答案

【问题标题】：Window.click event does not fire on IOS safari - JavaScript onlyWindow.click 事件不会在 IOS Safari 上触发 - 仅限 JavaScript
【发布时间】：2017-09-06 04:57:21
【问题描述】：

原版 javascript -

document.addEventListener("click", function(){ alert('click fired');});

角度为 2 + -

 @HostListener('window: click', ['$event'])
        public iosSafariClick(e: any): void {
         alert('event fired');
        }

此方法在 iPad 上的 IOS safari 上均无效。

除非我点击某个按钮、超链接或任何可操作的项目，否则不会触发 Click 事件。

我的目标是在“div 元素”上触发 blur 事件。

为此，我试图检查是否在 HTML 正文上触发了任何点击事件，并检查它是否在“div 元素”上。

HTML >

<html>
  <body>
    <div id= 'menu'>123...</div>
  </body>
</html>

Angular 组件 > 打字稿 >

 @HostListener('window: click', ['$event'])
   public iosSafariClick(e: any): void {
     if(e.target.id !== 'menu'){
       this.menu = false;  // to close menu 
     }        
   }

有没有办法使用 javascript 或 Angular 来克服这个障碍？

【问题讨论】：

有人有解决这个问题的办法吗？

标签： javascript html ios angularjs safari

【解决方案1】：

使用基于触摸的设备时，向浏览器发出的事件是不同的。它还为开发人员提供了准确的用例，以便围绕其进行设计和开发。

我会假设既然没有鼠标那么就不会有点击事件。

取自 MDN：为了为基于触摸的用户界面提供高质量的支持，触摸事件提供了解释触摸屏或触控板上的手指（或触控笔）活动的能力。

尝试使用： document.addEventListener('touchstart', () => console.log('touch called'));

您始终可以选择使用function () {} 而不是() => {}

查看完整详情：https://developer.mozilla.org/en/docs/Web/API/Touch_events

【讨论】：

试过 TouchEnd 没用。但是 TouchStart 工作得很好。谢谢朋友！

【解决方案2】：

我对 Angular 的遗忘比我记得的要多，但是当单击映射到“窗口”时，我遇到了同样的问题。将侦听器从“窗口”切换到“正文”修复了 Safari 中的问题。

善于倾听

document.querySelector('body').addEventListener('click', e => {
  console.log('clicked ', e)
// oh yeah, I'm good!
})

坏听众

window.addEventListener('click', e => {
  console.log('clicked ', e)
// oh yeah, I'm good!
})

【讨论】：