关于Safari浏览器中连续两次click事件未触发change事件的技术问询

问题场景 #

点击页面内的<span>元素触发foo()函数，连续调用两次隐藏文件输入框的click()方法时：

• 非Safari浏览器：会先后弹出两次文件选择器，选择文件后change事件正常触发
• Safari浏览器：仅弹出一次文件选择器，且选择文件后change事件完全不触发

解决思路及代码实现 #

• 拆分连续click调用，加入异步延迟
  Safari对用户交互触发的文件选择器有严格的行为限制，同步连续调用click()会被浏览器拦截，导致后续的选择器弹出和事件触发失效。通过setTimeout将第二次click延迟执行，让浏览器有足够时间处理第一次选择器的流程，同时保留用户交互的上下文。

• 重置文件输入框的value值
  部分浏览器中，若用户选择了和上次相同的文件，change事件不会重复触发。在change事件回调中重置input的value为空字符串，确保每次选择操作都能触发事件。

修改后的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <input type='file' style="display: none" id='button' />
    <script>
        const fileInput = document.getElementById('button');
        fileInput.addEventListener('change', () => {
            console.log('changed');
            // 重置value，保证相同文件也能触发change事件
            fileInput.value = '';
        });
        function foo() {
            fileInput.click();
            // 异步延迟执行第二次click，适配Safari的交互限制
            setTimeout(() => {
                fileInput.click();
            }, 100);
        }
    </script>
    <span onclick="foo()">Click</span>
</body>
</html>

• 理解Safari的交互上下文限制
  Safari要求文件选择器的触发必须直接关联用户的单次主动交互，同步连续触发会被判定为非用户主动操作，从而限制后续行为。异步延迟的方式能让两次click都处于浏览器保留的用户交互上下文范围内，避免被拦截。

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