javascript iOS 9 上的 Safari 不会触发隐藏输入文件的点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32708496/
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
Safari on iOS 9 does not trigger click event on hidden input file
提问by Hugo Demiglio
I have a website with an upload field, but the inputis hidden with display: none;and I have a divfor calling this action.
我有一个带有上传字段的网站，但它input被隐藏了display: none;，我有一个div调用此操作的方法。
It worked on iOS 8, but now after the iOS 9 update, nothing happens when I touch in the div.
它适用于 iOS 8，但现在在 iOS 9 更新后，当我在 div 中触摸时没有任何反应。
I've tried using the [0].click()or pure VanillaJS like document.getElementById('file_input').click()and nothing works.
我试过使用[0].click()或纯 VanillaJS 之类的document.getElementById('file_input').click()，但没有任何效果。
All these methods work between iOS 5 and iOS 8.
所有这些方法都适用于 iOS 5 和 iOS 8。
If you want, link to this example on JSFiddle:https://jsfiddle.net/o1r265tz/6/embedded/result/
如果需要，请链接到 JSFiddle 上的此示例：https ://jsfiddle.net/o1r265tz/6/embedded/result/
$(document).ready(function(){
$(document).on('click touchstart', '.upload-box', function(e){
e.stopPropagation();
$('.form-upload input.file-input').trigger('click');
$('.debug').append('<p>Clicked!</p>');
console.log('Clicked!');
return false;
});
});.upload-box {
border: 3px solid #999;
padding: 10px;
text-align: center;
border-radius: 5px;
font-size: 35pt;
font-family: Arial;
color: #555;
}
.form-upload {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upload-box">Click here to upload =D</div>
<form class="form-upload" enctype="multipart/form-data">
<input class="file-input" id="file_input" type="file">
</form>
<div class="debug"></div>采纳答案by Hugo Demiglio
Three things are causing this problem:
导致此问题的三个原因：
At javascript, removing
return false;of event listener.At the stylesheet, the element which calls the action must have the property
cursor: pointer;. Probably Apple put this requirement in these calls for best feedback on user interface.Again at the stylesheet, we can't setting
display: none;for hidden input because some browsers don't accept clicks on elements that aren't displayed.
在 javascript 中，删除
return false;事件侦听器。在样式表中，调用操作的元素必须具有属性
cursor: pointer;。可能苹果在这些呼吁中提出了这个要求，以获得对用户界面的最佳反馈。再次在样式表中，我们无法设置
display: none;隐藏输入，因为某些浏览器不接受对未显示元素的点击。
回答by Henri Toivar
Putting the <input type="file"/>on top of the fake button with position: absoluteand opacity: 0works. You might also need to set the correct z-index and make the input 100% width and height so it catches the click on top of the button.
<input type="file"/>用position: absolute和将 放在假按钮的顶部opacity: 0。您可能还需要设置正确的 z-index 并使输入的宽度和高度为 100%，以便捕获按钮顶部的点击。
Source: https://forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828
来源：https: //forums.meteor.com/t/webkit-on-ios-ignores-trigger-click-on-file-input/29828
回答by Aleks Dorohovich
Try to remove touchstartevent from JS file or replace it with mousedownevent.
尝试touchstart从 JS 文件中删除事件或将其替换为mousedown事件。
$(document).on('click', '.upload-box', function(e){
...
});