javascript - dragleave 冒泡事件的问题

Question

我有一个 dragenter 的工作示例和 dragleave突出显示应放置文件的区域的事件。本例 works correctly .

现在如果我只添加一个 <span>在我的 dragenter 区域内，highlighting does not work correctly不再(当您将图像悬停在文本顶部时 - 突出显示消失)。如你所见dragleave被多次调用。

所有我改变的都被替换了Drop files here至 <span>Drop files here</span>

那里也有 knockout 代码，但我相信这与错误无关。我知道问题出在事件冒泡上，但是

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

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

P.S.这只是一个简化的例子，看起来我没能正确地制作它(我认为只有通过 JS 才能解决它，看来我的方式描述了它也可以用 css 来解决)。很抱歉造成这种困惑。示例看起来更像 this .不仅文本在可放置元素内部，而且当您放下某些东西时，元素也会出现在那里。这些元素是可点击的。

Malk 解决方案的问题在于 :after元素停留在这些可点击元素之上，从而使它们不可点击。

Answer 1

看起来您可以将处理程序附加到位于跨度之后和之上的覆盖 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

.drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold'Vollkorn';
    color: #bbb;

    position:relative;
}

.drop_zone_overlay { 
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

http://jsfiddle.net/rWWK5/

---

编辑

实际上您根本不需要添加其他元素。您可以使用 CSS :after 创建伪元素，它应该可以覆盖内容。

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

http://jsfiddle.net/ewng9/

---

编辑 2

您可以使用此技术仅在拖动时覆盖内容。您只需将 .css({}) 调用更改为 toggleClass() 并将 :after 放在新类上。

http://jsfiddle.net/dKsmw/

这还可以让您创建一个为背景元素着色的叠加层:

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