前言

这两天出现一个bug:在用腾讯会议,企业微信进行屏幕分享时,vue的draggable组件里的子组件触发不了点击事件。

解决过程

  1. 本来认为,钉钉屏幕分享没有问题,但是腾讯旗下的都有问题是腾讯的问题,但是晚上又考虑一下认为如果真是腾讯的问题网络上不应该一篇说明都没有,于是第二天又重新解决。
  2. 用 vuedraggable 自己写了个 demo,发现在屏幕分享下点击事件存在,因此一定是在项目中被函数拦截。
  3. 找到 ul 和 li,对 li 绑定点击事件,正常情况下点击事件触发,屏幕分享下不触发,因此在父组件被什么函数拦截。
  4. 对于拖拽组件,v-bind 绑定的是组件属性,重点在于 delay 这个值控制的是鼠标按下后多久可以拖拽,原来为 10ms,在正常情况下,10ms足够完成一次点击事件,但是腾讯会议的屏幕分享应该有劫持,导致时间在 10 - 100ms 不等,因此在点击时被此组件拦截,没有到子组件上,因此导致 bug 的出现。

解决方法

在此组件绑定 end,即 @end= ,通过 event 可以拿到在此组件被点击时当前字段移动前后的相对位置,将新位置作为参数传给子函数,解决。