这里通过属性区分：document.addEventListener('dragleave',function(ev){if(ev.target.getAttribute('allowdrop')!==null){ev.target.toggleAttribute('over',false);}})document.addEventListener('dragenter',function(ev){if(ev.target.getAttribute('allowdrop')!==null){ev.target.toggleAttribute('over',true);}})效果如下：当有子元素时看到，拖动目标经过子元素时元素，外部样式已经丢失。原因其实很简单。在穿过子元素时，droptarget也会触发dragleave事件！有没有办法不触发它？这里有两种方式：一是可以取消对dragleave的监听，因为在执行dragleave时，元素本身并不知道即将进入哪个区域，很容易“误伤”。而是每次dragenter，先去掉上一个droptarget的属性，再添加一个新的，有点类似tab的操作。具体实现如下：varlastDrop=null;document.addEventListener('draenter',function(ev){if(lastDrop){lastDrop.toggleAttribute('over',false);}constdropbox=ev.target.closest('[allowdrop]');//获取最近的放置目标if(dropbox){dropbox.toggleAttribute('over',true);lastDrop=dropbox;}})还有另一种方法：使用CSS非常简单。这里有一个非常简单粗暴的方法直接禁止子元素的鼠标响应，如下：.content[allowdrop](empty::after{"allowdrop")*{pointer-events:none;}没有元素响应了，完美。在子元素的情况下，上面完美的三、多层嵌套放置目标的方法其实可以解决大部分问题，毕竟大部分场景都是平面的。但是，有时候会遇到多层结构，比如可视化编辑工具，尤其是现在流行的低代码平台，会涉及到多层结构，假设HTML就是这样。