放下 child 会触发 parent 的 "drop" 事件侦听器。我想通过 Child 特定的 "drop" 覆盖该事件侦听器

Question

这是我的代码。我用不同的选择器定义了两个不同的放置事件，但是 parent 一个覆盖了 child 放置。

//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();
        });
    }

parent "drop" 用于 a 和 child "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();
        });

    }

这是我的 fiddle : https://jsfiddle.net/Bhavesh21/1haokeum/5/ aliceblue div 是工作区，您可以将仪器和反应物拖到工作区。如果您首先将 SampleTestTube 拖到工作区，然后将试剂拖到它上面，则与图像关联的侦听器将不起作用。

另一方面，如果您将 Reagent 直接拖到设备中的 SampleTestTube 上，它就可以工作。

Answer 1

当您将一个项目放入工作区时，您实际上是手动创建了它的一个副本。但是此副本没有附加侦听器（因为当您搜索所有 .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：我只是 copy/paste 了你为附加 drop 侦听器所做的代码，但将它放在一个函数中并调用该函数可能会更清楚。

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

放下 child 会触发 parent 的 "drop" 事件侦听器。我想通过 Child 特定的 "drop" 覆盖该事件侦听器

Dropping over child triggers the "drop" event listener of parent . I want to override that event listener by a Child specific "drop"

html

javascript

drag-and-drop

html5-draggable