Question

我最初是在React中尝试过的：

<button
  onClick={() => {
    const clickEvent = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true,
    });
    const element = document.getElementById('file');
    element.dispatchEvent(clickEvent);
  }}
/>
<input type="file" id="file" onChange={() => alert('changed')} style="display:none">

这适用于除Safari之外的所有内容（iOS和OSX）。在Safari中，出现文件上传对话框，但是changed警报从不出现。

如果我将其更改为此，它可以在Safari中使用：

<a
  href="#"
  onClick={() => {
    const clickEvent = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true,
    });
    const element = document.getElementById('file');
    element.dispatchEvent(clickEvent);
  }}
/>
<input type="file" id="file" onChange={() => alert('changed')} style="display:none">

为什么<a>起作用但<button>不起作用？

Answer 1

不是真正的答案，而是格式化的代码，因此我必须以这种方式发布。

我将您的React代码转换为普通的JavaScript和HTML，对我来说，它在Safari中运行得很好：

<html>
<head>
  <title>Indirect file click</title>
  <script>
    function fileClick() {
      const clickEvent = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true,
      });
      const element = document.getElementById('file');
      element.dispatchEvent(clickEvent);
    }
  </script>
</head>
<body>
  <button onClick="fileClick()">Button</button><br>
  <input type="file" id="file" onChange="alert('changed')" style="display: none">
</body>
</html>

为什么将<button>用作<input type =“ file”>`的委托，却不能在Safari中使用<a>`？

1 个答案: