在輸入上模擬點擊事件 - JavaScript

-1

我試圖通過單擊anchor標記來模擬輸入標記上的單擊，這樣我可以隱藏輸入並將圖像包裹在錨標記中。在輸入上模擬點擊事件 - JavaScript

這個工程使用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>

JavaScript版本使用new Event和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呈現，但沒有被分派的事件，我究竟做錯了什麼？

來源

2017-10-18 Philip Dortmund

約'的document.getElementById（ 'user_avatar'）是什麼。點擊（）'？ – DontVoteMeDown

爲什麼不將樣式設置爲像圖像一樣？ – izulito

無恥的插件：[適用於所有HTML元素的通用合成事件調度函數]（https://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click/2381862#2381862） ...（不只是像'click（）'）方法那樣的輸入/鏈接 –

用途：

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

測試和它的作品。

來源

2017-10-18 17:42:38

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>

來源

2017-10-18 17:43:04 brk

你並不需要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>

來源

2017-10-18 17:54:40

我很感謝你的幫助，但是這需要更多時間來挖掘CSS規則，因爲它是現有項目。謝謝！。 –

在輸入上模擬點擊事件 - JavaScript

回答

相關問題