模拟输入上的点击事件 - JavaScript答案

【问题标题】：Simulating click event on input - JavaScript模拟输入上的点击事件 - JavaScript
【发布时间】：2023-04-04 16:21:01
【问题描述】：

我试图通过点击anchor标签来模拟对输入标签的点击，这样我可以隐藏输入并将图像包装在锚标签内。

这可以使用 jQuery 触发功能，但我不能仅使用“普通”Javascript：

jQuery 版本：

let fake = $('.fake')
fake.click(function(e) {
  e.preventDefault();
  $('#user_avatar').trigger('click');
})

#user_avatar { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

使用new Event和dispatchEvent的JavaScript版本：

let fake = document.querySelector('.fake');
fake.addEventListener('click', function(e) {
  e.preventDefault();
  console.log('testing');
  let clickEvent = new Event('click');
document.getElementById('user_avatar').dispatchEvent(clickEvent)
})

#user_avatar { display: none; }

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

console.log 被渲染，但事件没有被调度，我做错了什么？

【问题讨论】：

document.getElementById('user_avatar').click() 呢？
为什么不将输入设置为看起来像图像？
无耻插件：generic synthetic event dispatching function that works on all HTML elements ...（不只是像click()这样的输入/链接）方法

标签： javascript html

【解决方案1】：

用途：

document.getElementById('user_avatar').click();

经过测试，它可以工作。

【讨论】：

不能在移动浏览器上运行（safari ios13, chrome android 5）

【解决方案2】：

document.getElementById('user_avatar').click() 可以工作

let fake = document.querySelector('.fake');
fake.addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('user_avatar').click()
})

#user_avatar {
  display: none;
}

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

【讨论】：

【解决方案3】：

你根本不需要 JavaScript 来解决这个问题。

只需通过设置其opacity:0 使输入不可见并将两个元素绝对定位在一个共同的父元素中，然后确保输入位于顶层并且与它后面的图像大小相同。

#user_avatar { opacity:0; position:absolute; z-index:9; width:320px; height:240px; }
img { position:absolute; z-index:-1; }

<div>
  <input type="file" name="file_field" id="user_avatar">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</div>

【讨论】：

感谢您的帮助，但这需要更多时间来挖掘 CSS 规则，就像现有项目一样。谢谢！。