如何在JavaScript的click事件监听中正确获取点击对应的子元素信息

问题根因 #

你当前使用的event.target指向的是点击事件触发时最内层的DOM节点：如果目标元素（比如你要捕获的标签）内部还有子元素（文字、span、图片等），触发事件的target就会是这些子元素，因此无法直接读取到父级标签的id、href等属性，只有所有元素都具备的outerHTML属性能正常返回内容。

修复代码 #

document.addEventListener('click', function (event) {
    // 优先向上查找最近的a标签，找不到再使用原始触发节点
    let elem = event.target.closest("a") || event.target;
    let jsonObject = {
        Key: 'click',
        Value: elem.parentElement.id || "Unkown",
        Value1: elem.id || elem.name || elem.value || elem.href || elem.className || "Unkown",
        Value2: elem.outerHTML || "Unkown",
        Value3: elem.innerHTML || "Unkown",
    };
    window.chrome.webview.postMessage(jsonObject);
});

扩展说明 #

• 如果你需要同时捕获其他类型的元素（比如按钮、自定义块级元素等），可以修改closest的选择器参数，例如要同时捕获a标签和button按钮，写成event.target.closest("a, button")即可
• 如果部分元素存在阻止事件冒泡的逻辑导致捕获失效，可以给事件绑定添加第三个参数true，开启捕获阶段监听：document.addEventListener('click', function(event) {}, true)

内容的提问来源于stack exchange，提问作者François HEBERT