将JS事件委托给不同的对象

Question

我正在尝试重新设置输入类型文件元素的皮肤。

我通过将两个元素放在彼此的顶部来做到这一点。其中一个是input标签，另一个是一个漂亮的按钮。如下所示：

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

当用户悬停、点击等操作时，该按钮会有一些不错的效果(所有这些都是CSS完成的)。但是，由于input-type-file具有更高的z索引(需要这样做，因为您不能模拟单击它)，所以所有这些效果都不会显示出来。

有没有一种很好的方法来委托input-type-file获得的所有事件，并在按钮上触发它们？

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