Lit JS中document点击监听器的event.target不符合预期问题咨询

为什么event.target不是实际点击的元素？ #

这不是Lit的缺陷，是Shadow DOM的事件封装机制导致的。当事件从Shadow DOM内部冒泡到外部DOM树时，浏览器会对事件进行重定向处理：将event.target替换为Shadow DOM的宿主元素，以此保证Shadow DOM的封装性，避免外部代码直接访问组件内部的DOM结构。

如何获取实际点击的元素？ #

有两种可靠的解决方案：

1. 使用event.composedPath()方法 #

该方法会返回事件传播的完整路径数组，数组的第一个元素就是用户实际点击的元素：

connectedCallback() {
    document.addEventListener('click', (event) => {
        const actualTarget = event.composedPath()[0];
        console.log(actualTarget);
    });
}

composedPath()返回的路径包含事件传播过程中经过的所有DOM节点，顺序从最内层的目标元素到最外层的document。

2. 在Shadow DOM内部绑定事件 #

如果仅需要监听组件内部的点击行为，直接在组件模板的元素上绑定事件，而非绑定到document，此时event.target就是实际点击的内部元素：

render() {
    return html`
        <div @click=${this.handleClick}>
            <!-- 组件内部元素 -->
        </div>
    `;
}

handleClick(event) {
    console.log(event.target); // 这里输出实际点击的内部元素
}

补充说明 #

如果你的组件使用了closed模式的Shadow DOM（即attachShadow({mode: 'closed'})），composedPath()可能无法获取到内部元素，这种情况下建议优先使用组件内部绑定事件的方式。

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