為什么當我的輸入元素是div子元素時無法單擊，而當我用按鈕替換此輸入時，按鈕是可點擊的

Question

我想創建一個包含一個按鈕和一個輸入元素的div元素。 但是當輸入在div中時，輸入變得不可點擊

 var video_button = document.createElement("BUTTON"); var user_area = document.createElement("DIV"); var inp = document.createElement("INPUT"); function upload_video(e){ console.log("upload_video function"); var v = document.createElement("VIDEO"); inp.onchange = function(e){ v.src = window.URL.createObjectURL(inp.files[0]); v.style.heigth = "1000px"; v.style.width = "1000px"; user_area.appendChild(v); } } function input(e){ console.log("input function"); inp.setAttribute("type","file"); user_area.appendChild(inp); inp.addEventListener("click",upload_video) } window.onload = function(){ video_button.innerHTML = "upload a video"; video_button.addEventListener("click",input); user_area.setAttribute("contentEditable","true"); user_area.style.width = "100px"; user_area.style.height = "500px"; document.body.appendChild(user_area); user_area.appendChild(video_button); } 

Answer 1

由於content editable屬性設置為true，因此在Firefox上不起作用。 其背后是有原因的 。 如果您不需要的太多，可以將其刪除。

 var video_button = document.createElement("BUTTON"); var user_area = document.createElement("DIV"); var input_wrapper = document.createElement("DIV"); var inp = document.createElement("INPUT"); function upload_video(e){ console.log("upload_video function"); var v = document.createElement("VIDEO"); inp.onchange = function(e){ v.src = window.URL.createObjectURL(inp.files[0]); v.style.heigth = "1000px"; v.style.width = "1000px"; user_area.appendChild(v); } } function input(e){ console.log("input function"); inp.setAttribute("type","file"); input_wrapper.setAttribute("contentEditable","false"); user_area.appendChild(input_wrapper); input_wrapper.appendChild(inp); inp.addEventListener("click",upload_video) } window.onload = function(){ video_button.innerHTML = "upload a video"; video_button.addEventListener("click",input); user_area.setAttribute("contentEditable","true"); user_area.style.width = "100px"; user_area.style.height = "500px"; document.body.appendChild(user_area); user_area.appendChild(video_button); }