javascript - 如何检查标签是否点击？

Question

我有一个这样的输入标签：

<input type="file" id="excel_file"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
style="color:transparent; "/>

和输出：

我想做的是检查Choose File按钮是否被点击。我无法使用与普通按钮相同的方法进行检查，因为这choose file不是按钮。有谁知道我如何检测用户是否点击它？

标签： javascripthtml

Answer 1

如果您只想监听 click 事件，只需使用以下命令：

const inputElement = document.getElementById('excel_file');
inputElement.addEventListener('click', () => {
    console.log('I was clicked');
}, false);

但是，如果您想监听文件选择的事件，那么您应该使用“更改”而不是“点击”。'change' 事件只会在选择文件时触发，以避免在用户单击按钮然后通过单击取消退出时触发您的功能。

有关详细信息： 使用来自 Web 应用程序的文件