javascript - 为什么我的输入元素(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

这在 Firefox 上不起作用，因为内容可编辑属性设置为 true。还有一个reason在它后面。如果您不太需要它，可以将其删除。

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);
}