时间戳

首页 > 解决方案 > 如何使用另一个 JavaScript 防止 onclick 事件

javascript - 如何使用另一个 JavaScript 防止 onclick 事件

问题描述

我有一个 div 用作拖放。它还具有选择文件功能。选择文件后，我希望客户能够删除它并选择另一个。所以我正在使用输入 onchange 更改 div 的内容。出现问题 wneh 我想删除一个文件，文件浏览器会自动打开，我想阻止它。这是我的代码：

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 打开和关闭，但这不起作用。

标签： javascriptdom

解决方案

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

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/

编辑：用你的新评论更新了 fiddle，现在它检查是否event.target有 class removeFile。在此处检查更新的小提琴https://jsfiddle.net/zgranda/3scvbjmq/41/

推荐阅读