Question

我正在尝试对多个dropzones进行分层，但我只想要“最高”的一个来调用ondrop-function。我试过通过给一个层提供更高的z-index来尝试这样做，但是当将文件放入两个dropzones（在我的例子中为div标签）中分层的区域时，仍然会多次调用该函数。
我怎么能阻止这个？我希望函数只被调用一次这是我的（示例）代码：

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset='UTF-8'>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Example</title>
</head>
<body>

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

<script type="text/javascript">
    function drop_upload(event) {
        event.preventDefault();
        alert(event.dataTransfer.files[0]);
        alert(event.dataTransfer.files[0].name);
    }
</script>

</body>
</html>

Answer 1

在您的文件中，由于一个<div>是另一个的孩子，因此从孩子到父母的事件bubbles除非您通过

阻止该事件

 event.stopPropagation();

另一方面，将<div> s组织在另一方内可防止z-index产生任何影响。＆＃34;内部＆＃34; div总是＆＃34;高于＆＃34; ＆＃34;外部＆＃34;从某种意义上讲，任何鼠标事件都会在内部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事件函数只会执行一次，因为没有具有该属性的元素属于父子关系。

HTML5图层多个dropzones

1 个答案: