模拟输入的点击事件-JavaScript [英] Simulating click event on input - JavaScript

问题描述

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

I'm trying to simulate a click on an input tag, through the click on an anchor tag, this way I can hide the input and wrap an image inside the anchor tag.

这可以使用jQuery触发函数工作，但是我不能仅使用普通" Javascript来使它工作:

This works using the jQuery trigger function, but I can't make it work with just "plain" 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版本:

The JavaScript version using new Event and dispatchEvent:

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已呈现，但未调度事件，我在做什么错了?

The console.log is rendered, but the event isn't being dispatched, what am I doing wrong?

推荐答案

使用:

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

经过测试，可以正常工作.

Tested and it works.

这篇关于模拟输入的点击事件-JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！