如何用另一个JavaScript防止onclick事件的发生？

Question

我有一个作为拖放的div，它也有选择文件的功能。当文件被选中时，我希望客户能够删除它并选择另一个文件。所以我通过输入change来改变div的内容，问题是当我想删除一个文件时，filebrowser会自动打开，我想阻止它。

HTML

 <div id="drop-zone"
      ondrop="drag_drop(event)" 
      ondragover="return false"
      onclick="selectFile()"
 >
   <span class="drop-zone__title">Drop your file here</span>
   <span class="drop-zone__subtitle">or select a file</span>
 </div>
 <input type="file"
        name="upload-file"
        id="upload-file"
        accept=".pdf,.docx"
        aria-invalid="false"
        onchange="changeFile()"
 />

JS。

 const dropZone = document.querySelector('#drop-zone')
 const uploadFile = document.querySelector('#upload-file')

function drag_drop(event) {
  event.preventDefault()
  if (event.dataTransfer.files[0]) {
    uploadFile.files = event.dataTransfer.files
    dropZone.innerHTML = '<div>' + event.dataTransfer.files[0].name + 
                         '<button class="removeFile" onclick="fileRemove(event)">
                          <i class="far fa-times"></i>
                          </button> 
                          </div>'
  dropZone.classList.add('drop-success');
}

function selectFile() {
 if (uploadFile.files.length == 0) uploadFile.click()
}

function changeFile() {
            dropZone.innerHTML = '<div>' + uploadFile.files[0].name + 
                                 '<button class="removeFile" onclick="fileRemove(event)">
                                 <i class="far fa-times"></i></button></div>'
            dropZone.classList.add('drop-success');
        };

function fileRemove() {
  dropZone.onclick=''  // setting the onclick of drop-zone to none
  dropZone.innerHTML = '<span class="drop-zone__title">Drop your file here</span>' +
                       '<span class="drop-zone__subtitle">Or select a file</span>'
 dropZone.classList.remove('drop-success');
 uploadFile.value = '';
 dropZone.onclick= selectFile() // setting back onclick of drop-zone for selecting files
        }

我的fileRemove()函数表现不佳。它删除了文件，设置回div的内容，但马上重新打开文件选择器--我想防止这种情况。我曾尝试设置onclick的开启和关闭，但没有成功。

Answer 1

这里的问题是这个函数调用，它是点击文件上传输入再次

function selectFile() {
 if (uploadFile.files.length == 0) uploadFile.click()
}

如果用户可以正常点击javascript中的输入，不知道为什么要点击，只要在这行注释就可以了。

function selectFile() {
 if (uploadFile.files.length == 0){
  //uploadFile.click()
 } 
}

这里是全提琴 https:/jsfiddle.netzgranda3scvbjmq13

EDIT: 更新了你的新评论，现在它检查是否有... event.target 具有阶级性 removeFile. 检查更新的小提琴在这里 https:/jsfiddle.netzgranda3scvbjmq41