怎么利用 currentTarget 属性在 HTML 编辑器事件委托中精确定位绑定容器-html教程-PHP中文网

是。currenttarget 总是等于事件监听器绑定的元素，它始终指向当前事件处理程序所附加的 dom 节点，与事件冒泡路径无关；而 target 指向实际触发事件的最深子元素，二者在事件委托中必然不同。

怎么利用 currenttarget 属性在 html 编辑器事件委托中精确定位绑定容器

currentTarget 总是等于事件监听器绑定的元素吗？

不是。在事件委托场景中，currentTarget 指向的是「当前正在处理该事件的监听器所挂载的那个节点」，而 target 才是真正被点击/触发的最深子元素。这个区别决定了你能不能靠它稳稳锁定编辑器容器本身——比如一个 contenteditable 的 <div id="editor"> 上绑了 <code>click，用户点进里面某个 <span class="mention">@张三</span>，此时 target 是那个 span，currentTarget 才是 #editor。

为什么不能只用 target 去判断编辑器容器？

因为 target 会随用户操作位置剧烈变化：点空白处可能是 textNode，点图片是 <img>，点嵌套 <div> 里的按钮又是另一个元素。一旦你写 <code>if (e.target === editorEl) 或依赖 e.target.closest('#editor')，就容易漏判或误判——尤其当编辑器内容动态渲染、有 Shadow DOM 或跨 iframe 场景时，closest() 可能失效或查到父级容器外。

currentTarget 在事件冒泡到监听器那一刻就确定，不受内部结构干扰
只要监听器直接绑定在编辑器根元素上，e.currentTarget 就永远是你想锁死的那个容器
它不依赖 DOM 层级查找，性能更稳，也绕过了 shadowRoot 边界问题（只要监听器挂在 shadow host 上）

在 contenteditable 编辑器里怎么安全读取 currentTarget？

关键不是「怎么读」，而是「什么时候读」和「读完怎么用」。事件委托必须确保监听器在冒泡阶段执行（默认就是），且不能被中间节点的 stopPropagation() 截断——这点在富文本编辑器里特别常见，比如某些 toolbar 插件或 inline widget 会主动阻止冒泡。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

监听器必须直接绑定在编辑器容器上，不要委托给 body 或 document（否则 currentTarget 就不是容器了）
避免在子元素 handler 中调用 e.stopPropagation()，如需局部拦截，改用 e.stopImmediatePropagation() 并确保不影响容器级逻辑
示例：给 #editor 绑 mousedown 处理光标定位，直接用 e.currentTarget 获取容器，再调用 getSelection().getRangeAt(0).commonAncestorContainer 配合判断是否仍在其内

document.getElementById('editor').addEventListener('click', function(e) {
  const container = e.currentTarget; // 这里永远是 #editor 元素
  if (e.target.matches('span.mention')) {
    handleMentionClick(container, e.target);
  }
});

currentTarget 在 focus/blur 类事件里还可靠吗？

不可靠。focus 和 blur 不冒泡，所以你无法在父容器上监听它们并指望 currentTarget 指向容器——浏览器根本不会把事件传上来。这时候必须换思路：用 focusin/focusout（它们冒泡），或者直接在编辑器容器上监听 focus，但要确认该容器本身可聚焦（加 tabindex="0"）。