网站信息化建设总体情况,免费获取资源的公众号,建行官网的网址,山东淄博网站建设公司场景#xff1a;
在做组件拖拽过程中#xff0c;需要获取到触发元素冒泡过程中的所有元素#xff0c;所以使用了event.path属性。在Chrome下正常运行#xff0c;但是在FireFox下测试时发现#xff0c;完犊子#xff0c;失效了#xff0c;通过问题排查#xff0c;发现了…场景
在做组件拖拽过程中需要获取到触发元素冒泡过程中的所有元素所以使用了event.path属性。在Chrome下正常运行但是在FireFox下测试时发现完犊子失效了通过问题排查发现了Chrome下打印的event事件对象和FireFox下打印的事件对象不一样在火狐浏览器下没有event.path属性。
描述
原始chrome的event事件对象存在path属性 在chrome浏览器版本升级 109.0.5414.120后event也没有path属性了 firefox的event事件对象是一直没有path属性的
解决方案
方案一
百度寻找答案发现很多人都给出如下的方案
e.path || (e.composedPath e.composedPath())e.path是Chrome单独支持的属性不属于MDN的标准所以在MDN上搜不到event.path但是composedPath是标准的属性。在MDN上解释如下 点击查看MDN关于composedPath的介绍
高兴的将上述代码拿到项目中尝试发现WTF怎么是空数组难道是自定义事件的锅吗在Vue中不行
方案二
在分析FireFox的event对象时发现event.target对象中的parentNode就是上层的父元素DOM节点。 于是准备自己将所有的冒泡元素收集起来以下composedPath方法就是具体的实现过程
composedPath (e) {// 存在则直接returnif (e.path) { return e.path }// 不存在则遍历target节点const target e.targete.path []while (target.parentNode ! null) {e.path.push(target)target target.parentNode}// 最后补上document和windowe.path.push(document, window)return e.path
}然后在项目中使用这个方法做一个兼容即可。记录一下真坑
综上方案一不可行可能是vue-draggable组件库自定义事件对象的锅原生js可能有效需要进一步验证。方案二可行。
