tldr; 我需要一个元素来注册拖放指针事件，但将单击和其他指针事件传递给它后面的元素。
我正在使用react-dropzone. 我希望dropzone它覆盖整个页面，因此如果您将文件拖到页面的任何部分，您可以将其拖放以上传图像。当dropzone没有文件被拖到它上面时它是透明的，所以我需要点击来注册它后面的元素。
为此，我为 dropzone 组件赋予了以下样式：
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
但是，pointer-events: none;会导致dropzone无法识别必要的拖放事件。有没有办法识别这些特定的指针事件，同时将其他事件（如点击）传递给dropzone?
尝试使用该draggable属性。它对我有用
<p draggable="true">
jkjfj
</p>
更新答案：
#dropzone{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10; //set this to make it sit on the top of everything
pointer-events: none;
}
.user-is-dragging #dropzone{
pointer-events: all !important;
}
//element declarations
const dropzone = document.getElementById("dropzone");
const body = document.body;
//timeout function to help detect when the user is dragging something
let dragHandle;
// utility function to detect drag & drop support
function dragDropSupported() {
var div = document.createElement('div');
return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}
function initDragDrop(){
//simply exit / do other stuff if drag & drop is not supported
if(!dragDropSupported()){
console.warn("Drag & drop not supported");
return;
}
//add user-is-dragging class which enables pointer events for the drop event
body.addEventListener("dragover", (e) => {
body.classList.add("user-is-dragging");
clearTimeout(dragHandle);
dragHandle = setTimeout(() => {
body.classList.remove("user-is-dragging");
}, 200);
});
//this is to prevent the browser from opening the dragged file(s)
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
});
dropzone.addEventListener('drop', (e) => {
//prevent the browser from opening the dragged file(s)
e.preventDefault();
//dragged files
const files = e.dataTransfer.files;
console.log(files);
})
}
我通过在 .file-drop 上将指针事件设置为 none 但在 .file-drop > .file-drop-target.file-drop-dragging-over-frame 上设置为 auto 来修复此错误
我最近遇到了一个类似的问题并设法解决它，将 dropzone 的 z-index 设置为 1，同时将 say 元素的 z-index 设置为 2，位置相对。