Vue自定义指令中动态元素事件冒泡失效，回车触发父元素问题求助

核心问题出在事件处理的执行顺序上：你的tooltip按键事件中，e.stopPropagation()被放在了alert()之后。由于alert()是同步阻塞调用，会直接暂停JavaScript执行，此时事件冒泡已经完成，父元素的监听逻辑已经触发，后续的stopPropagation()根本起不到阻止冒泡的作用。

修复代码 #

app.directive("xedit", {
  mounted(el, binding) {
    el.setAttribute("contenteditable", true);
    el.addEventListener(
      "keydown",
      (e) => {
        // 用e.key替代已废弃的keyCode，兼容性更好
        if (e.key !== 'Enter') return;
        alert("Parent got triggered");
      },
      false
    );

    let tooltip = document.createElement("span");
    tooltip.setAttribute("contenteditable", true);
    tooltip.innerText = " Tooltip it";
    tooltip.addEventListener(
      "keydown",
      (e) => {
        if (e.key !== 'Enter') return;
        e.stopPropagation(); // 先阻止事件冒泡，再执行alert
        alert("Tooltip Got triggered");
      },
      false
    );

    el.appendChild(tooltip);
  }
});

补充说明 #

• 把e.stopPropagation()移到alert()之前，能确保在事件冒泡到父元素前就切断传播路径，这才是阻止冒泡的正确时机。
• 替换keyCode为e.key === 'Enter'是因为keyCode已被MDN标记为废弃API，使用e.key更符合现代前端规范。

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