Electron中打开文件选择对话框：按钮点击无响应问题求助

可能的原因及修复方案 #

1. 脚本执行时机错误 #

如果你的JS代码在DOM元素加载完成前执行，document.getElementById会返回null，导致事件绑定失效，点击按钮自然没有反应。

修复方法：

• 把<script>标签移到<body>的最后位置，确保DOM先加载完成再执行脚本；
• 或者用DOMContentLoaded事件包裹代码，确保DOM就绪后再初始化：

document.addEventListener('DOMContentLoaded', () => {
    const gameDirectoryInput = document.getElementById('game-directory');
    const exploreButton = document.getElementById('explore-btn');
    const fileSelector = document.getElementById('file-selector');
    const filePath = document.getElementById('file-path');

    exploreButton.addEventListener('click', () => {
        fileSelector.click(); 
    });

    fileSelector.addEventListener('change', (event) => {
        if (event.target.files.length > 0) {
            const selectedFile = event.target.files[0];
            gameDirectoryInput.value = selectedFile.name; 
            filePath.textContent = `Arquivo selecionado: ${selectedFile.name}`; 
        } else {
            gameDirectoryInput.value = ''; 
            filePath.textContent = ''; 
        }
    });
});

2. 用更可靠的替代方案（无需JS触发点击） #

可以用<label>标签绑定隐藏的文件输入，这种方法兼容性更好，还能避免JS触发点击的潜在限制：
修改HTML部分，将按钮替换为label（或用label包裹按钮）：

<div class="input-group">
    <input type="text" class="form-control" id="game-directory" readonly />
    <label class="btn btn-dark" for="file-selector">Explorar...</label>
    <input type="file" id="file-selector" style="display: none;" />
</div>

此时点击label会自动触发对应id的文件选择对话框，无需额外绑定click事件，保留原有的change事件逻辑即可。

3. 检查是否有其他代码阻止事件 #

如果页面中存在其他JS代码，排查是否有对按钮或其父元素绑定了event.preventDefault()、stopPropagation()等逻辑，导致点击事件无法正常传递。

内容的提问来源于stack exchange，提问作者Gomaink