Как предотвратить событие onclick другим JavaScript

Question

У меня есть div, который действует как перетаскивание. Он также имеет функцию выбора файлов. Когда файл выбран, я хочу, чтобы покупатель мог удалить его и выбрать другой. Итак, я меняю содержимое div с вводом onchange. Проблема возникает, когда я хочу удалить файл, файловый браузер открывается автоматически, и я хочу предотвратить это. Вот мой код:

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.net/zgranda/3scvbjmq/13/

РЕДАКТИРОВАТЬ: Обновил скрипку с вашим новым комментарием, теперь он проверяет, имеет ли event.target класс removeFile. Проверьте обновленную скрипку здесь https://jsfiddle.net/zgranda/3scvbjmq/41/