Javascript CSS指针事件–；接受拖动，拒绝单击

tldr；我需要一个元素来注册拖放指针事件，但要将单击和其他指针事件传递给它后面的元素。

我正在使用react构建一个拖放照片上传功能。我希望

dropzone

覆盖整个页面，因此如果您将文件拖到页面的任何部分，您可以将其拖放以上载图像。当没有文件被拖过时，

dropzone

是透明的，所以我需要单击来注册它后面的元素

为此，我为dropzone组件提供了以下样式：

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;

---

但是，

指针事件：无导致
dropzone
无法识别必要的拖放事件。有没有办法识别这些特定的指针事件，同时将其他事件（如单击）传递到
dropzone
后面的元素？
我最近遇到了一个类似的问题，并设法解决了这个问题，将dropzone的z-index设置为1，同时将say元素的z-index设置为2，使用相对位置。
尝试使用
可拖动属性。它对我有用

<p draggable="true">
  jkjfj
</p>


jkjfj

我刚刚解决了这个问题，在类上将指针事件设置为“无”#拖放目标在dragover/dragenter上添加一个类“user is Draging”到body并在dragleave Dragent上删除它（使用setTimeout-clearTimeout避免闪烁），然后简单地添加了一个css规则：
。user is Draging#DragDragent目标{指针事件：全部；}

function initDragDrop(){
var droppedFiles = false;
if (dragDropSupport) {
    dragDropTarget.addClass('user-draggable');
}
body.on('dragover dragenter', function() {
    body.addClass('user-is-dragging');
    clearTimeout(timeout["dragLeaveBodyRemoveclass"]);
});
dragDropTarget.on('drag dragstart dragend dragover dragenter dragleave drop', 
function(e) {
        e.preventDefault();
        e.stopPropagation();
    })
    .on('dragover dragenter', function() {
        dragDropTarget.addClass('user-dragover fade-in');
        clearTimeout(timeout["dragLeaveBodyRemoveclass"]);
    })
    .on('dragleave dragend drop', function() {
        dragDropTarget.removeClass('user-dragover fade-in');
        clearTimeout(timeout["dragLeaveBodyRemoveclass"]);
        timeout["dragLeaveBodyRemoveclass"] = setTimeout(function(){
            body.removeClass('user-is-dragging');
        }, 300);

    })
    .on('drop', function(e) {
        droppedFiles = e.originalEvent.dataTransfer.files;
        body.removeClass('user-is-dragging');
        console.log(e.originalEvent.dataTransfer.files);
    });
}

我通过将指针事件设置为.file-drop上无，但在.file-drop>.file-drop-target.file-drop-dragging-over-frame上自动，修复了此错误