在父级元素内有多个子元素时,拖动子元素1,经过子元素2,3时会触发dragleave enter事件 当只想监听leave父元素时会因上述情况导致@dragleave事件触发时机不正确,解决方案
let currentOverEl = null //当前鼠标指针活动的父级元素
function handleDragEnter(e, day) { // 父级dragenter回调
if (!currentOverEl) {
currentOverEl = e.currentTarget
currentOverEl.classList.add('hover')
}
if (!currentOverEl.contains(e.target) || e.target !== currentOverEl) {//进入别的父级元素之后相当于触发leave事件
currentOverEl.classList.remove('hover')
currentOverEl = e.currentTarget
currentOverEl.classList.add('hover')
}
}
function handleDrop(day, event) { // 父级drop回调 也相当于手动触发leave
currentOverEl.classList.remove('hover')
currentOverEl = null
}
网友评论