Javascript 为什么一个类的每个实例都会触发几次单击？

我在一个页面上有三个工具提示按钮。我可以通过单击按钮之外的任何位置来关闭任何打开的工具提示。这就是我遇到的：

在下面的代码中，当我单击页面上的任何位置时，这部分代码的处理程序被激活$document； 我可以在inspector中看到，函数closeOnOutsideClick被触发三次——它对页面上的每个工具提示按钮进行三次检查。我不知道是什么机制造成了这种情况，为什么要检查它$event.target.closestthis.$elem是否只执行一次？我的代码可以在这里找到，也可以在下面找到：

这是一个更复杂代码的简化版本，只是为了举例说明我的问题：

常量选择器={ 工具提示：'.tooltip容器'， 工具提示按钮：'.tooltip按钮'， tooltipMessage:“.tooltip消息” } 类工具提示{ 构造函数工具提示{ 这。$elem=$tooltip； this.$tooltipButton=this.$elem.findselectors.tooltipButton； this.$tooltipMessage=this.$elem.findselectors.tooltipMessage； this.$tooltipMessageText=this.$tooltipButton.attr'data-tooltip-content'； 这是一系列重大事件； } 宾杜伊事件{ $document.on'click'，event=>this.closeOnOutsideClickevent； 此.$tooltipButton。单击，=>this.showTooltipMessage； this.$tooltipButton.on'blur'，=>this.hideTooltip； } 显示工具提示消息{ 这是$ToolTimpMessage .textthis.$ToolTimpMessageText .addClass“显示消息”； } 隐匿{ 这是$ToolTimpMessage 文本 .removeClass“显示消息”； } closeOnOutsideClickevent{ 如果！$event.target.closestthis.$elem{ 这是希多尔提普； } } } //在另一个文件中初始化 常量工具提示=$'。工具提示容器'； tooltip.eachfunctionindex，项目{ 新工具提示； } .输入包装器{ 边缘底部：2米； } .工具提示容器{ 位置：相对位置； 显示：内联块； } .工具提示消息{ 显示：无； 位置：绝对位置； 左：100%； 排名：0； 宽度：10em； 填充：0.5雷姆； 背景：2000人； 颜色：fff； } .tooltip-message.Showed-message{ 显示：内联块； } 钮扣{ 宽度：1.2米； 高度：1.2米； 边界半径：50%； 边界：0； 背景：2000人； 字体系列：衬线； 字体大小：粗体； 颜色：fff； } 按钮：焦点{ 大纲：无； 盒影：0.25rem天蓝； } 输入{ 显示：块； } 你叫什么名字？ 我 你多大年纪？ 我 你的国籍是什么 我

---

您的单击事件在多个元素上触发，因为您只指定了一个文档。也许你可以更具体一些：

$(document).on('click', '.input-wrapper', (event) => this.closeOnOutsideClick(event));

由于实例化了3个工具提示，因此每次都将单独的事件侦听器绑定到文档。每次单击都会触发每个侦听器。但是，这些监听器中的每个监听器都有一个不同的选项，这使得每个监听器都可以判断其工具提示是否被单击，如果没有，则隐藏它

---

如果需要单个侦听器，可以存储所有工具提示的列表，并让事件侦听器在工具提示列表中迭代，关闭所有未单击的工具提示。

您创建了3个工具提示实例，他们每个人都在文档上安装了一个点击监听器？但我需要检测除了点击工具提示按钮以外的任何页面点击，好吗。你试过了吗$event.currentTarget.closestthis.$elemAs event.currentTarget指的是我引用的事件处理程序所附加到的元素，它将始终是文档，而不是我需要检查的工具提示按钮。所以这不符合我的目的。

tooltip.each(function(index, item) {
  new Tooltip(item);
})