將JS事件委託給不同的對象

Question

我試圖重新輸入輸入類型的文件元素。

我這樣做是通過將兩個元素放在彼此的頂部。其中之一是輸入標籤，另一個是一個不錯的按鈕。就像這樣：

<input type="file" id="filesButton" multiple> 
<input type="button" id="filesButtonOverlay" value="Add Files"> 

該按鈕有一些很好的效果，當用戶懸停，點擊等（所有完成是CSS）。然而，由於輸入類型文件具有較高的Z-index（需要成爲案例，因爲您無法模擬點擊它），所有這些效果都不顯示。

有沒有一種很好的方式來委派輸入類型文件獲取並觸發按鈕上的所有事件？

Answer 1

如果將輸入封裝在div中並將事件附加到div，該怎麼辦？然後針對您的按鈕進行更改？

Answer 2

我想你應該能夠與共享的父母做到這一點。然後，您將hover放在父項上，而不是按鈕本身上。

<span id="wrapper"> 
    <input type="file" id="filesButton" multiple> 
    <input type="button" id="filesButtonOverlay" value="Add Files"> 
</span> 

---

$("#wrapper").hover(function(){ 
    $("#filesButtonOverlay").dosomething(); 
}); 

或CSS：

#wrapper:hover #filesButtonOverlay{ 
    stuff: 
} 

如果可能具有相同的頁面上有多個，你想改變使用類，而不是id小號