单击屏幕上的任意位置以隐藏没有 Jquery 的通知栏

Question

我实际上正在开发一个 Ionic 3 项目，但它可以是任何 Javascript 框架来解决我实际面临的问题：

根据点击时出现的自定义通知栏（屏幕右上角），您实际上可以关闭该通知栏，再次点击同一个按钮，但这样的用户体验真的很糟糕。

我的期望：用户可以点击屏幕中的任意位置来隐藏通知栏

我知道如何在 jquery 中做到这一点，但我不想在那个项目中使用它：

notif.html:

  <ion-button (click)="toggleNotifications()">
    <div class="notif-button" id="notif-button"></div>
  </ion-button>

notif.ts（jQuery方式）：

$('#notif-button').click(function(e){
  e.stopPropagation();
  $('#hide-notif').toggleClass('show-notif');
});

$('#hide-notif').click(function(e){
  e.stopPropagation();
});

$('body,html').click(function(e){
 $('#hide-notif').removeClass('show-notif');
});

Answer 1

<ion-button (click)="toggleNotifications()">
    <div class="notif-button" id="notif-button"></div>
</ion-button>


<script>
// Get the modal
var modal = document.getElementById('notif-button');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>