自定义指令中的事件冒泡在 vue 中似乎不起作用

Question

总体来说我对 Vue 和 JS 还比较陌生。我正在 VUE 中创建自定义指令，该指令将有两个事件侦听器，一个到附加指令的节点，另一个到我动态附加的工具提示节点，如下所示：

      app.directive("xedit", {
      mounted(el, binding) {
        el.setAttribute("contenteditable", true);
 el.addEventListener(
          "keydown",
          (e) => {
            if (e.keyCode !== 13) 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.keyCode !== 13) return;
            alert("Tooltip Got triggered");
            e.stopPropagation();
          },
          false
        );

        el.appendChild(tooltip);
});

我的预期行为是，当在动态创建的 SPAN 工具提示元素上按下 keydown.enter 时，它应该触发警报（“工具提示被触发”）……但这至少是我在 vanillay JS 中能够做的事情。当在 VUE 中放入自定义指令时，这不起作用。看起来预期的冒泡效果似乎不起作用，因为它会触发父节点事件警报（“父节点被触发”）

有关如何在动态附加的 SPAN 元素上按下 keydown 时触发事件的任何帮助

Answer 1

我认为事件不会到达内部跨度，因为事件传播和冒泡仅涉及目标的父级和祖先，而不涉及其子级。

我能想到的唯一解决方案是从父事件处理程序手动触发工具提示上的事件，就像这样。

const vXedit = {
  mounted: (el) => {
    el.setAttribute("contenteditable", true);
    el.addEventListener(
      "keydown",
      (e) => {
        if (e.keyCode === 13) {
          tooltip.dispatchEvent(new Event("triggerTooltip"))
          return
        }
        alert("Parent got triggered");
      },
      false
    );

    let tooltip = document.createElement("span");

    tooltip.setAttribute("contenteditable", true);
    tooltip.innerText = " Tooltip it";
    tooltip.addEventListener(
      "triggerTooltip",
      (e) => {
        alert("Tooltip Got triggered");
        e.stopPropagation();
      },
      false
    );

    el.appendChild(tooltip);
  },
};