[英]Dropping over child triggers the “drop” event listener of parent . I want to override that event listener by a Child specific “drop”
这是我的代码。 我用不同的选择器定义了两个不同的 drop 事件,但是父事件覆盖了子 drop。
//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。当客户端在图像上放置时,我想分配一个特定的function。
//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/ aliceblue div 是工作区,您可以将设备和反应物拖到工作区。 如果您首先将 SampleTestTube 拖到工作区,然后将试剂拖到其上,则与图像关联的侦听器不起作用。
另一方面,如果您将 Reagent 直接拖到设备中的 SampleTestTube 上,它就可以工作。
当您在工作区中放置一个项目时,您实际上是手动创建了它的副本。 但是这个副本没有附加监听器(因为当您搜索所有.Droppable2
项目并将放置监听器附加到它们时副本不存在)。
您所要做的就是将用于.Droppable2 的相同事件侦听器附加到您的副本:
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
侦听器所做的代码,但将其放入 function 并调用 function 可能更清楚。
NB2:您的代码中有错误,我没有修复它们,但至少您的工作区中有您的子侦听器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.