tldr; ドラッグ アンド ドロップ ポインター イベントを登録する要素が必要ですが、クリックやその他のポインター イベントをその背後の要素に渡します。
を使用して、react でドラッグ アンド ドロップの写真アップロード機能を構築していますreact-dropzone。ページ全体に配置したいdropzoneので、ファイルをページの任意の部分にドラッグすると、ドロップして画像をアップロードできます。dropzoneファイルがドラッグされていないときは透明なので、その背後にある要素に登録するにはクリックする必要があります。
これを実現するために、dropzone コンポーネントに次のスタイルを与えました。
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
ただし、pointer-events: none;はdropzone必要なドラッグ アンド ドロップ イベントを認識しません。これらの特定のポインターイベントを認識し、他のもの (クリックなど) を の背後の要素に渡す方法はありますdropzoneか?