Javascript HTML5层多个DropZone_Javascript_Html

Javascript HTML5层多个DropZone

javascript html

Javascript HTML5层多个DropZone,javascript,html,Javascript,Html,我正在尝试分层多个DropZone，但我只希望“最高”的一个调用ondrop函数。我已经尝试过给一个层一个更高的z索引，但是当将文件放入两个dropzone（在我的例子中是div标记）都分层的区域时，该函数仍然会被多次调用。我怎样才能防止这种情况？我希望函数只调用一次。这是我的（示例）代码：例子函数拖放上传（事件）{ event.preventDefault（）；警报（event.dataTransfer.files[0]）；警报（event.dataTransfer.files[

我正在尝试分层多个DropZone，但我只希望“最高”的一个调用ondrop函数。我已经尝试过给一个层一个更高的z索引，但是当将文件放入两个dropzone（在我的例子中是div标记）都分层的区域时，该函数仍然会被多次调用。
我怎样才能防止这种情况？我希望函数只调用一次。
这是我的（示例）代码：


例子
函数拖放上传（事件）{
event.preventDefault（）；
警报（event.dataTransfer.files[0]）；
警报（event.dataTransfer.files[0].name）；
}

在您的文件中，因为一个

是另一个的子事件，所以事件从子事件到父事件，除非您使用

 event.stopPropagation();

另一方面，将

s一个组织在另一个内部可以防止

z-index

产生任何影响。“内部”div总是“在”外部“之上”，这意味着在内部div上发生的任何鼠标事件都将在冒泡到外部div之前被调度到内部div

如果要更改该顺序，必须使用绝对定位的

s，它们是DOM树中的同级，但通常一个在另一个之上：

<body>
  <div style="position: absolute; z-index: 1; width: 300px; height: 300px; background-color: green;" ondrop="drop_upload(event)" ondragover="return false">
  </div>
  <div style="position: absolute; z-index: 0; width: 200px; height: 200px; background-color: black;" ondrop="drop_upload(event)" ondragover="return false">
  </div>
</body>

与此类似，

ondrop

事件函数将只执行一次，因为没有具有该属性的元素处于父子关系中

<body>
  <div style="position: absolute; z-index: 1; width: 300px; height: 300px; background-color: green;" ondrop="drop_upload(event)" ondragover="return false">
  </div>
  <div style="position: absolute; z-index: 0; width: 200px; height: 200px; background-color: black;" ondrop="drop_upload(event)" ondragover="return false">
  </div>
</body>