？：がなぜ入力タイプ= 'ファイル'はイベントをディスパッチしませんか？この単純な例では動作しないのはなぜ
<input id="image" type="file"/>
<img src='https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png' onclick='imageLoad()'></img>
<script>
function imageLoad() {
let ev = new Event('click', {bubbles: true});
image.dispatchEvent(ev);
}
</script>
まず、<img>終了タグをご確認ください。 第2に、ブラウザのセキュアな原則から、入力のクリックイベントをjsでディスパッチできません。 divのために、それはOKになります。
function imageLoad() {
let image = document.querySelector('#div');
let ev = new Event('click', {bubbles: true});
image.dispatchEvent(ev);
}
function clickDiv(){
console.log('clicked the div');
}<input id="image" type="file" />
<div id="div" onclick="clickDiv()">123</div>
<img src='https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png' onclick='imageLoad()' />特定のセキュリティへの影響が適用されていることが正しいですが、あなたはMouseEventにEventコンストラクタを変更した場合、あなたの目標に応じて、それがこの例で動作します。
...
<body>
<input id="image" type="file" />
<img id="handle" src="https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png" />
<script>
let handle = document.getElementById('handle');
handle.addEventListener('click', imageLoad, false);
function imageLoad() {
let ev = new MouseEvent('click', {bubbles: true});
image.dispatchEvent(ev);
}
</script>
...
は、 "それは動作しません" を定義します。 'image'は定義されていません。あなたのコンソールはおそらくあなたにこれを伝えています –
また、' img'は[* void element *]（https://www.w3.org/TR/html5/syntax.html#void-elements ）、終了タグは決してありません。あなたは ''と書くことはありません。 HTMLでは、それはちょうど '
'です。 XHTML（おそらく使用していない）では、それは ''です。 –
@JeremyThille：悲しいことに、 'image'は未定義ではなく、' id'を持っているので、ファイル入力のための自動グローバルです。 ： - | –