禁止dragleave事件在对象元素的子元素中触发

1.问题描述

在不同的DOM元素之间通过拖拽实现内容交换，此时对正在交互中的元素用一个active类做标记，drag离开后取消active,需求本身很简单，但是实现过程中发现每次从对象元素进入子元素中也会触发dragleave。

dragenter,dragleave的触发类似于mouseover,mouseout而满足当前需求的mouseenter,mouseleave在drap中并没有

2.解决方案，在所操纵dom元素的子元素上添加元素穿透

.dom *{pointer-events: none;}

缺点：导致所有子元素上的事件失效

3.鼠标最终跑出父元素的上一个事件是dragenter,而目标恰好就是父元素自身

var lastenter = null;
item.addEventListener('dragenter',function(e){
    lastenter = e.target;
    this.classList.add('active');
});
item.addEventListener('dragleave',function(e){
    if(lastenter==this){
        this.classList.remove('active');
    }
});

4.相关知识

drag事件

被我们拖的元素（按住鼠标）
ondragstart – 用户开始拖动元素时触发
ondrag – 元素正在拖动时触发
ondragend – 用户完成元素拖动后触发

释放拖拽元素时触发的事件（松开鼠标）

ondragenter – 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover – 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave – 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop – 在一个拖动过程中，释放鼠标键时触发此事件

mouse事件

1、mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。
2、mouseenter和mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次。
3、mouseover和mouseout比mouseenter和mouseleave先触发

参考链接：https://stackoverflow.com/questions/10867506/dragleave-of-parent-element-fires-when-dragging-over-children-elements/14027995#

铁血汉子 2020年2月18日

javascript(html)

0 7382