如何阻止点击关闭Tippy Tooltip时触发下方锚点链接？

我太懂你遇到的这个糟心问题了——点击Tippy tooltip想关闭它，结果居然触发了下面的锚点链接跳转，完全不是预期的行为！这其实是浏览器的事件冒泡机制在作祟：点击tooltip的事件会沿着DOM树向上传递，最终触发了下方链接的点击事件。

好在有两种简单的解决办法，你可以按需选择：

方法1：用Tippy自带的onClick回调阻止冒泡 #

Tippy提供了onClick配置项，我们可以在这里直接阻止事件冒泡，不让它传到下面的链接：

tippy('#myButton', {
  content: 'Click this tooltip to close it',
  trigger: 'click',
  onClick(instance, event) {
    // 掐断事件冒泡，避免触发下方链接
    event.stopPropagation();
    // 手动关闭tooltip（trigger为click时默认会切换状态，这步可选）
    instance.hide();
  }
});

方法2：给Tooltip元素绑定点击事件阻止冒泡 #

如果你更习惯直接操作DOM元素，也可以在tooltip初始化完成后，给它的容器加个点击事件监听，阻止冒泡：

const myTooltip = tippy('#myButton', {
  content: 'Click this tooltip to close it',
  trigger: 'click'
});

// 给tooltip的弹出容器加点击监听
myTooltip.popper.addEventListener('click', (e) => {
  e.stopPropagation();
});

完整可测试代码 #

下面是整合了方法1的完整代码，直接用就行：

<main>
  Clicking on the tooltip to close it navigates to the link. <br><br>
  <a href="foo.html">This is the link that will be triggered</a> <br><br>
  <button id="myButton">Click me to see tooltip</button>
</main>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
tippy('#myButton', {
  content: 'Click this tooltip to close it',
  trigger: 'click',
  onClick(instance, event) {
    event.stopPropagation();
    instance.hide();
  }
});
</script>

简单说下原理：stopPropagation()会终止事件在DOM树中的传播，这样点击tooltip的事件就不会跑到下面的链接那里去触发跳转啦。

内容的提问来源于stack exchange，提问作者Mike