HTML5圖層多個下拉框

我想分層多個下拉框，但我只想要「最高」的一個來調用ondrop函數。我已經嘗試通過給一層提供更高的z-index來做到這一點，但是當把文件放到一個區域中的兩個下拉區域（在我的情況下，div標籤）被分層時，仍然會多次調用該函數。
我該如何預防？我希望函數只能被調用一次。
這是我的（例子）代碼：HTML5圖層多個下拉框

<!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>

來源

2017-06-23 Cookie

在文件中，作爲一個<div>是另一個的孩子，事件bubbles從孩子到家長，除非你避免與

event.stopPropagation();

在另一方面，組織<div>一個在另一個防止z-index有任何影響。「inner」div始終位於「outer」的「上方」，這意味着在內部div上發生的任何鼠標事件都會在其出現在外部div之前分派給它。

如果你想改變這個順序，你必須使用絕對定位<div> S中的DOM樹的兄弟姐妹，但grafically一個在另一個之上：

<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事件函數只會執行一次，因爲沒有具有該屬性的元素處於父子關係中。

來源

2017-06-23 19:50:00 ccprog

HTML5圖層多個下拉框

回答

相關問題