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

Question

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

我通过将两个元素放在一起来做到这一点。其中一个是输入标签，另一个是一个不错的按钮。像这样的东西：

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

当用户悬停、点击等时，该按钮有一些很好的效果（全部由 CSS 完成）。但是，由于输入类型文件具有更高的 z-index（必须是这种情况，因为您无法模拟单击它）所有这些效果都不会显示。

有没有一种很好的方法来委托输入类型文件获取的所有事件并在按钮上触发它们？

score 0 · Accepted Answer

如果您将输入包装在 div 中并将事件附加到 div 会怎样？然后用您的更改来定位您的按钮？

score 0 · Accepted Answer

我认为您应该能够与共享的父母一起做到这一点。然后将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:
}

如果您可能在同一页面上有多个，您希望更改为使用 classes 而不是ids

2 回答 2