問題タブ [pointer-events]

iFrame を使用して動的ヘッダーをロードする Web ページがあります (簡単に言えば、Shopify ページを含む大きなサイトがあります。サイトの他のすべてのページは Ektron ウィジェットを使用してヘッダーをロードしますが、できません)。それはShopifyコードにあるので、代わりにiFrameを使用して別のページからヘッダーをロードしています)。ヘッダーには、機能する必要があるボタンと、ログイン ボタンをクリックすると開くモーダル ウィンドウがあります。モーダルウィンドウが問題です。私の iFrame は現在、ヘッダー自体のサイズ (330px) です。iFrame ウィンドウがそれよりも大きい場合、ページの下部にあるコンテンツが覆われ、それらのボタンがクリックできなくなります。「pointer-events:none」を iFrame に追加できません。これは、iFrame ヘッダーのボタンが機能する必要があるためです。ただし、ログインモーダルが開くと、iFrame は全体を表示するのに十分な大きさではないため、カットオフされます。また、iFrame の高さを 1000px に設定し、z-index を使用して他のコンテンツの背後に配置することもできません。これを行うと、Shopify ページのコンテンツがモーダル ウィンドウの上に表示されるためです。

私が最後に試したのは、iFrame の高さを動的に変更して、ログイン ボタンをクリックすると iFrame の高さが増加してモーダル全体が表示されるようにすることでした。ただし、iFrame コンテンツのドメインは Shopify ページとは異なるため、iFrame をヘッダー ドキュメントの親としてターゲットにすることはできません。

私が本当にやりたいことは、iFrame の高さをモーダル ウィンドウを表示するのに十分な大きさにすることですが、iFrame のボタンを無効にすることなく、iFrame の背後にあるボタンをクリックできるようにすることです。ボタンを div と div の両方で有効にする方法はありますか?

キャンバスを使用して、ドラッグできるオブジェクトをペイントします。ユーザーがオブジェクトのない領域に触れると、ページをスクロールできます。タッチ イベントの実装は機能していますが、PointerEvents API サポートの追加に問題があります。

タッチ イベント API を使用event.preventDefault()して、スクロールを防止します。

PointerEvents API では機能しません。pointerDownイベントは取得されますが、移動イベントは発生せず、ページの自動スクロールが開始されます。

これまでのところ、CSS プロパティを使用してページのスクロールとタッチ アクションを切り替えることができることを発見しましたがtouch-action、タッチごとに切り替える方法はありません。

たとえば、ユーザーは 1 本の指でページをスクロールし、同時に 2 本目の指でオブジェクトを移動できます。

含まれている div の pointer-events プロパティをオーバーライドしようとしています。これまでのところ、IE 11 を除くすべてで動作します。おそらく、pointer-events プロパティが IE 11 に追加されました。ただし、何らかの理由でオーバーライドされません。

div 全体では、ボタンを含むポインター イベントを使用できません。divにはイベントがまったくないため、IEはプロパティpointer-eventsをサポートしていると思いますが、子に明示的にイベントを設定すると、何らかの理由で許可されません。ご協力ありがとうございました！

背景が既にリンクされているため、リンクのないボタンを作成しようとしています。したがって、あなたはそれをかじることができるはずです。pointer-events:noneについては知っていますが、これを使用すると、div の:hoverが機能しなくなります。

これを達成する方法はありますか？

私のHTMLは：

CSS:

「ボタン」クラスには、:hover 効果 + クリックスルーが必要です。このセットアップでは、:hover 効果は表示されません。