HTML5拖放:听“拖放”和“拖放”事件时不调用“拖放”

Question

我在另一个父div中包含了div，它们都允许“丢弃”。

两个案件：

• 案例1:不允许发生Drop事件： 当我在子框中删除元素时，两个元素都执行dragleave事件，因此正确地删除了两个元素的红色类，但是没有执行drop。

​

• 案例2:允许丢弃事件(通过删除js代码中的注释)： 当我在子框中删除元素时，拖放事件不会被执行，并且我只删除子元素上的红色类(包含在" drop“事件侦听器中的代码) 问题: 在第2种情况下，如果我将元素放入名为div的子元素中，红色类仅在子div中删除，而不是在父div中删除。在不经过event.path对象的情况下，如何删除所有父类中的类？ 下面是案例1的费德勒 下面是案例2的费德勒

var myApp = angular.module('myApp'，[])；myApp.controller('MyCtrl'，'$scope'，函数($scope) { })；myApp.directive('drop'，函数()){返回{限制："A"，替换: false，link: function (范围、元素、attrs、ctlr) { var DragLeaveCounter=0= DragLeaveCounter=0；obj.addEventListener("dragenter"，函数(eventObject) { eventObject.preventDefault()；DragLeaveCounter++；if (DragLeaveCounter === 1) { obj.classList.add( 'red‘)；}；console.log("enter“，obj.id，DragLeaveCounter )；}，false)；Obj.addEventListener(“拖放”，函数(eventObject) { eventObject.preventDefault()；DragLeaveCounter-；if (DragLeaveCounter <= 0) { obj.classList.remove('red')；} console.log("leave“，obj.id，DragLeaveCounter)；}，false)；obj.addEventListener("drop"，函数(eventObject) { eventObject.preventDefault()；eventObject.stopPropagation()；console.log("drop“，obj.id，eventObject)；obj.classList.remove("red")；DragLeaveCounter=0；}，false)；obj.addEventListener("dragover"，函数(eventObject) { //TODO删除下一行的注释: eventObject.preventDefault()；console.log("dragover")；}，false)；}；

/*样式出现在这里*/ #父母{宽度:200 1px；高度:200 1px；边框:1 1px实心红；位置:相对；}子{位置:绝对；左:50 1px；顶部:50 1px；宽度:50 1px；高度:50 1px；背景颜色：#c7a499；}\child 2{位置:绝对；左:50 1px；顶部:110 1px；宽度:50 1px；高度:50 1px；背景颜色：#c7a499；} .red {背景颜色:红色！重要；} .green {背景颜色:绿色；}

Answer 1

当触发drop事件时，拖放功能的正确行为是不触发dragleave事件。如果不对event.preventDefault()事件使用drop，那么浏览器将尝试执行删除操作(IE:在浏览器中删除链接时加载链接)。这会导致触发leave事件。

更多信息：operations#drop

您应该让drop事件向上传播，以便在父进程中收集事件，在drop侦听器中删除该eventObject.stopPropagation();。