本文参考链接 https://www.jianshu.com/p/f96b754032a1
与上篇文章作者同样的需求,鼠标拖动文件进入元素的时候,元素样式要做出相应的改变。
本以为是个简单的操作,分分钟搞定,结果写完发现拖拽的时候的改变一直闪动,触发的dragenter事件中总是夹着dragleave。
原因是,鼠标进入事件监听的子元素的时候,会先触发dragleave事件。
我用的 vue,
当鼠标进入父元素时,添加类名,在此类名下重写它的所有子元素样式,全部添加穿透属性(不懂穿透属性的小伙伴自行查找)
当鼠标离开时,移除类名。
上面是说原理,下面上代码:
父元素:
:class="{'forbidden-childe-pointer-events': forbiddenChildePointerEvents}"
监听dragenter和dragover的处理事件:
onDrag(ev) {
this.forbiddenChildePointerEvents = true;
},
监听drop和dragleave事件的处理事件:
onDragLeave(ev) {
this.forbiddenChildePointerEvents = false;
},
scss部分:
.content {
&.forbidden-childe-pointer-events * {
pointer-events: none;
}
}
本文探讨了在Vue应用中实现文件拖放时,如何避免元素样式因dragenter/dragleave事件交替触发而产生的闪烁问题。通过设置父元素的穿透属性和禁用子元素的pointer-events,解决了事件交互导致的样式不稳定问题。
6600

被折叠的 条评论
为什么被折叠?



