丢弃 child 会触发 parent 的“drop”事件侦听器。我想用特定于子的“drop”覆盖该事件侦听器

Posted 2023-05-08

【中文标题】丢弃 child 会触发 parent 的“drop”事件侦听器。我想用特定于子的“drop”覆盖该事件侦听器

【英文标题】：Dropping over child triggers the "drop" event listener of parent . I want to override that event listener by a Child specific "drop"

【发布时间】：2020-09-24 10:07:48

【问题描述】：

这是我的代码。 我用不同的选择器定义了两个不同的 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:”用于 . 我想在客户端放在图像上时分配一个特定的功能。

//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 上，它可以工作。

【问题讨论】：

如果不希望 drop 事件从子事件传播到父事件，可以在子事件中添加 ev.stopPropagation()。

只有父监听器在触发而不是子监听器。所以我不认为这是因为冒泡。

您能否提供您的问题的 jsfiddle（或等价物）以便我们查看问题？

我添加了小提琴并更清楚地解释了我的问题。

【参考方案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：我只是复制/粘贴了您为附加 drop 侦听器所做的代码，但将其放入函数中并调用该函数可能更清晰。

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

【讨论】：

非常感谢您的帮助，它仍然是一个粗略的代码，这就是错误的原因。