如何在绑定mouseenter/mouseleave的悬浮div中点击内部元素而不关闭面板

问题原因 #

你遇到的问题核心是事件冒泡：面板内的「点击此处查看更多」链接被点击时，click事件会向上冒泡到父级的tooltip元素，触发了你绑定在tooltip上的hidePane点击事件回调，面板提前关闭导致跳转逻辑没执行。

解决方案 #

1. 最小改动方案：阻止链接的点击事件冒泡 #

给面板里的“点击此处查看更多”链接单独绑定点击事件，阻止事件向上冒泡到tooltip即可：

// 把选择器替换成你实际的链接选择器即可
const moreLink = document.querySelector('.tooltip-panel .more-link');
moreLink.addEventListener('click', (e) => {
  e.stopPropagation();
  // 如果是用JS控制跳转逻辑，直接在这补充代码即可
  // 如果是原生a标签带href属性，阻止冒泡后就能正常触发跳转
});

该方案不需要修改你现有其他逻辑，适配性最高。

2. 通用优化方案：修改hidePane判断逻辑（可选） #

如果后续面板内还会新增其他可点击元素，可以直接修改hidePane的回调逻辑，排除面板内部的点击事件：

function hidePane(e) {
  // 如果点击来源是面板内部元素，直接跳过关闭逻辑
  if (e.target.closest('.tooltip-panel')) return;
  // 原有关闭逻辑正常执行
  // ...
}

该方案可以避免后续再新增内部可点击元素时重复出现同类问题。

3. 触屏设备兼容优化（可选） #

如果你担心触屏场景下mouseleave逻辑出现异常，可以增加设备类型判断，触屏设备下只保留点击关闭逻辑：

const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
// 非触屏设备才绑定mouseleave事件
if (!isTouch) {
  tooltip.addEventListener('mouseleave', hidePane);
}
tooltip.addEventListener('click', hidePane);

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