删除子项会触发父级的"drop"事件侦听器。我想用特定于子"drop"覆盖该事件侦听器

Question

这是我的代码。 我定义了两个具有不同选择器的不同丢弃事件，但父选择器覆盖了子删除。

//this is parent
for(let i=0 ; i < $(".Droppable").length; ++i)
{
document.querySelectorAll(".Droppable")[i].addEventListener("drop",function (ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var copyimg= document.createElement("img");
var orignal= document.getElementById(data);
copyimg.src=orignal.src;
copyimg.alt=orignal.alt;
copyimg.style.zIndex=2
copyimg.classList.add("Droppable2");
ev.target.appendChild(copyimg);
copyimg.style.position="fixed";  
copyimg.style.left=ev.clientX+"px";
copyimg.style.top=ev.clientY+"px";
}  );
document.querySelectorAll(".Droppable")[i].addEventListener("dragover" ,function(ev){
ev.preventDefault();
});
}

父"drop"用于 a，子"drop：用于 a。 我想在客户端放在图像上时分配一个特定的功能。

//this is child   
for(let i=0;i<$(".Droppable2").length;++i)
{   document.querySelectorAll(".Droppable2")[i].addEventListener("drop",function (ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData('text');
myExperiment.Add(Number(data));
alert("test is" + myExperiment.test+"  indication is"+myExperiment.indication);
}  );
document.querySelectorAll(".Droppable2")[i].addEventListener("dragover" ,function(ev){
ev.preventDefault();
});
}

这是我的小提琴：https://jsfiddle.net/Bhavesh21/1haokeum/5/爱丽丝蓝div 是工作区，您可以将 appratus 和反应物拖到工作区。 如果先将 SampleTestTube 拖到工作区，然后将试剂拖到其上，则与图像关联的侦听器将不起作用。

另一方面，如果您将试剂直接拖到应用程序中的 SampleTestTube 上，它可以工作。

Answer 1

当您将项目拖放到工作区中时，您实际上是手动创建它的副本。但是此副本没有附加侦听器(因为当您搜索所有.Droppable2项并将放置侦听器附加到它们时，该副本不存在(。

您所要做的就是附加您用于的相同事件侦听器。可拖放2到您的副本：

copyimg.addEventListener("drop", function(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
myExperiment.Add(Number(data));
alert("test is" + myExperiment.test + "  indication is" + myExperiment.indication);
ev.target.appendChild(data);
//document.createElement("img");
console.log(this.parentNode);
this.parentNode.removeChild(this);
});
copyimg.addEventListener("dragover", function(ev) {
ev.preventDefault();
});

JSFIDDLE： https://jsfiddle.net/js1nbxry/

NB1：我只是复制/粘贴了您为附加drop侦听器而编写的代码，但是将其放入函数中并调用该函数可能更清楚。

注意2：你的代码中有错误，我没有修复它们，但至少你在工作区中有你的子侦听器。