Javascript dragleave上冒泡事件的问题

我有一个使用

dragenter

和

dragleave

事件的工作示例，这些事件突出显示了应该删除文件的区域。这个例子

现在，如果我只在绘图区域内添加一个

，那么（当您将图像悬停在文本顶部时，高亮显示将消失）。正如您所看到的，

dragleave

被多次调用

我所做的所有更改都被替换为

将文件放到此处

到

将文件放到此处

这里也有淘汰代码，但我相信这与bug无关。我知道问题在于事件冒泡，但是

   e.stopPropagation();
   e.preventDefault();
   return false;

没有帮助。你知道如何让它与dom元素一起工作吗

p.S.这只是一个简化的示例，看起来我无法正确地实现它（我认为这是通过JS解决它的唯一方法，而且似乎我描述的方法也可以通过css解决它）。很抱歉造成这种混乱。这个例子看起来更像。不仅文本位于可拖放元素的内部，而且当您拖放某些内容时，元素也会出现在其中。这些元素是可点击的

---

Malk解决方案的问题在于：

：after

元素位于这些可单击元素的顶部，从而使它们不可单击。

看起来您可以将处理程序附加到位于跨度之后和顶部的覆盖div：

<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="drop_zone">
        <span>Drop files here</span>
        <div class="drop_zone_overlay" data-bind="event:{
                dragover:   function(data, e){ $root.dragover(e);},
                drop:       function(data, e){ $root.drop(e, $data);},
                dragenter:  function(data, e){ $root.dragenter(e, $index());},
                dragleave:  function(data, e){ $root.dragleave(e, $index());}
            }">
          </div>
    </div>
    <ul data-bind="foreach: elements" style="height: 100px">
        <li data-bind="text: $data"></li>
    </ul>
</div>

---

编辑

实际上，您根本不需要添加其他元素。您可以使用CSS

：after

创建一个伪元素，该元素应该可以覆盖内容

.drop_zone {
    ...
    position:relative;
}
.drop_zone:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

---

编辑2

只有在拖动时，才能使用此技术覆盖内容。您只需将

.css（{}）

调用更改为

toggleClass（）

，并将

：置于新类的
之后


这还将允许您创建一个覆盖，为背景元素着色：

.drop_zone_hover:after{
    ...
    background-color:#0f0;
    opacity:0.6;
}

我认为这是正确的。在拖放时，使用覆盖或遮罩放置在拖放区域及其子对象上方。这可以防止您遇到的
span

我创建了一个与您的最新示例一起工作的示例
 谢谢你的建议。问题是，我展示了一个简化的示例，里面的内容远远不止
。根据dropzone内是否有元素，此范围也可见。由于这个原因，我不能把那个讨厌的
移出dropzone。仍然感谢您调查这个问题，并采取我的+1。跨度仍然在下降区。我只是在它旁边加了一个div。我真的很抱歉，但它仍然不适合我。我用更充分的例子更新了我的答案。如果您能看一看，我将不胜感激。谢谢。即使这样也无济于事。在您的示例中，它工作得非常好，但当我尝试将它移植到我的代码（这是一个css混乱）时，它不起作用。我找到了一个解决方法，可以在dragover上为元素着色。我知道这是低效的，但我会留下这个，直到我能花更多的时间。
.drop_zone_hover:after{
    ...
    background-color:#0f0;
    opacity:0.6;
}