CSS Pointer Events – Accept Drag, Reject Click : <p><strong>tldr; I need an element to register drag and drop pointer events, but pass click and other pointer events to elements behind it.</strong></p>

<p>I am building a drag and drop photo upload feature in react using <a href="https://react-dropzone.netlify.com/" rel="noreferrer" title="react-dropzone"><code>react-dropzone</code></a>. I want the <code>dropzone</code> to be over the whole page, so if you drag a file onto any part of the page, you can drop it to upload the image. The <code>dropzone</code> is transparent when no file is dragged over it, so I need clicks to register with elements behind it.</p>

<p>To accomplish this, I gave the dropzone component the following style:</p>

<pre><code>position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
</code></pre>

<p>However, <code>pointer-events: none;</code> causes the <code>dropzone</code> to not recognize the necessary drag and drop events. Is there any way to recognize these specific pointer events, while passing others (like click) to elements behind the <code>dropzone</code>?</p>
