CSS 指针事件 – 接受拖动，拒绝点击

Posted 2023-05-08

【中文标题】CSS 指针事件 – 接受拖动，拒绝点击

【英文标题】：CSS Pointer Events – Accept Drag, Reject Click

【发布时间】：2017-11-15 13:42:42

【问题描述】：

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

我正在使用 react-dropzone 构建拖放照片上传功能。我希望dropzone 覆盖整个页面，因此如果您将文件拖到页面的任何部分，您可以将其拖放以上传图像。 dropzone 在没有文件被拖过时是透明的，所以我需要点击来注册它后面的元素。

为此，我为 dropzone 组件赋予了以下样式：

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

但是，pointer-events: none; 导致dropzone 无法识别必要的拖放事件。有什么方法可以识别这些特定的指针事件，同时将其他事件（如点击）传递给dropzone 后面的元素？

【参考方案1】：

尝试使用draggable 属性。它对我有用

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

【参考方案2】：

更新答案：

#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);
    )

【讨论】：

变量'drag Drop Support'和'dragDropTarget'在哪里引用？

这个函数缺少许多之前的声明，例如：timeout ["dragLeaveBodyRemoveclass"]、body、dragDropSupport 等。如果执行它会出现很多错误，最好把它放在一个更清洁的方式

我写这个答案的时候还很年轻，感谢您的评论，我很快就会对其进行编辑，因此它提供了一个适当且干净的解决方案，并且在 vanilla JS 中

【参考方案3】：

我最近遇到了一个类似的问题并设法解决了这个问题，将 dropzone 的 z-index 设置为 1，同时将 say 元素的 z-index 设置为 2，位置相对。

【参考方案4】：

我通过在 .file-drop 上将指针事件设置为 none 而在 .file-drop 上设置为 auto 来修复此错误 > .file-drop-target.file-drop-dragging-over-frame

【讨论】：

你有一个简单而真实的例子可以看到它，因为它不适用于 css 中的指针事件，我无法让它工作