模拟输入上的点击事件 - JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46816088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simulating click event on input - JavaScript
提问by seb
I'm trying to simulate a click on an input tag, through the click on an anchortag, this way I can hide the input and wrap an image inside the anchor tag.
我正在尝试模拟对输入标签的点击，通过点击anchor标签，这样我可以隐藏输入并将图像包裹在锚标签内。
This works using the jQuery trigger function, but I can't make it work with just "plain" Javascript:
这可以使用 jQuery 触发器函数工作，但我无法仅使用“普通”Javascript：
jQuery version:
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>The JavaScript version using new Eventand dispatchEvent:
使用new Event和的 JavaScript 版本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>The console.log is rendered, but the event isn't being dispatched, what am I doing wrong?
已呈现 console.log，但未分派事件，我做错了什么？
回答by Sam
Use:
利用：
document.getElementById('user_avatar').click();
Tested and it works.
经测试，它有效。
回答by brk
document.getElementById('user_avatar').click()will work
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>回答by Scott Marcus
You don't need JavaScript at all to solve this problem.
你根本不需要 JavaScript 来解决这个问题。
Just make the input invisible by setting its opacity:0and position both elements absolutely within a common parent element, then make sure the input is on the top layer and is the same size as the image behind it.
只需通过将其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>