CSS指针事件 - 接受拖动,拒绝单击

Question

tldr; 我需要一个元素来注册拖放指针事件,但是将click和其他指针事件传递给它后面的元素.

我正在构建一个拖放照片上传功能react-dropzone.我希望它dropzone在整个页面上,所以如果你将文件拖到页面的任何部分,你可以删除它来上传图像.在dropzone当没有文件拖到它是透明的,所以我需要点击它后面的元素来注册.

为了实现这一点,我给了dropzone组件以下样式:

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

但是,pointer-events: none;导致dropzone无法识别必要的拖放事件.有没有办法识别这些特定的指针事件,同时将其他人(如点击)传递给后面的元素dropzone？

Answer 1

我最近遇到了类似的问题，并设法通过将 dropzone 的 z-index 设置为 1，同时将 say 元素的 z-index 设置为 2（相对位置）来解决它。