問題タブ [pointer-events]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - CSS ポインター イベント – ドラッグの受け入れ、クリックの拒否
tldr; ドラッグ アンド ドロップ ポインター イベントを登録する要素が必要ですが、クリックやその他のポインター イベントをその背後の要素に渡します。
を使用して、react でドラッグ アンド ドロップの写真アップロード機能を構築していますreact-dropzone
。ページ全体に配置したいdropzone
ので、ファイルをページの任意の部分にドラッグすると、ドロップして画像をアップロードできます。dropzone
ファイルがドラッグされていないときは透明なので、その背後にある要素に登録するにはクリックする必要があります。
これを実現するために、dropzone コンポーネントに次のスタイルを与えました。
ただし、pointer-events: none;
はdropzone
必要なドラッグ アンド ドロップ イベントを認識しません。これらの特定のポインターイベントを認識し、他のもの (クリックなど) を の背後の要素に渡す方法はありますdropzone
か?