自定义使用MouseEvent的path属性

hanccolo

已于 2024-05-31 17:35:45 修改

阅读量394

点赞数 8

文章标签：前端 javascript 开发语言

于 2024-03-12 15:38:54 首次发布

本文链接：https://blog.csdn.net/qq_40588529/article/details/136654052

版权

文章介绍了在处理浏览器兼容性问题时，如何将MouseEvent中的dom路径转换为PointerEvent中缺失的路径信息，通过upAdapter函数实现对target及其parentNode的递归遍历并最终获取完整路径。

摘要由CSDN通过智能技术生成

由于浏览器兼容问题，鼠标点击想获得MouseEvent打印出来是PointerEvent，而MouseEvent包含目标节点的dom路径path，PointerEvent中没有。这时利用PointerEvent的parentNode封装成path以供使用：

const upAdapter = (e) => {
    if (e.path) { return e.path; }
    // 不存在则遍历target节点
    let target = e.target;
    let path = [];
    while (target.parentNode !== null) {
        path.push(target)
        target = target.parentNode
    }
    // 最后补上document和window
    path.push(document, window);
    console.log("path",path);
    return path;
}