問題タブ [pointer-events]

タイトルの本質は、私の例で説明され、提示されています。私の仕事は疑似形状を作ることです。canvas 要素 (三角形)、canvas で受け入れられたプロパティ{pointer-events:all}、およびこの要素の取り扱いにカーソルを合わせる必要があります{pointer-events:none}。フレームワーク konvajs を使用してこれを行う方法。

クリック以外のすべてのマウスイベントを無効にしたいのですが、これがあります：

しかし、ポインターイベント: なし。すべてのイベントを無効にします。

特定のアンカーのクリックに基づいて互いの間で遷移する 2 つのメニューが重なり合っています。.defaultMenuそれらを and と呼びましょう.secondMenu。アンカーは.showSecondMenuand で、戻るには をクリックする必要があります.hideSecondMenu。それらの間の遷移には、不透明アニメーションが含まれます。通常、私display: noneは「非表示」メニューのクリックを無視していましたが、今回display: noneはオプションではありません。

を使用するトピックが見つかりましたpointer-event: noneが、IE9/10 では動作しません。そのため、互いに重なっている 2 つのメニュー間を簡単に移行する方法を探していますが、アクティブなメニュー項目のみがクリック可能です。

全体的なアイデアは、メニューが.defaultMenuから.secondMenu(および後方に) 移行すると、アクティブなメニューがフェードアウトし、新しい非表示のメニューがフェードインするということです。

述べられているように、IE9/10 と互換性があるはずです。

次のパターンを使用して、ドラッグのような機能を実装しようとしています:

• マーカー Pointer Down イベントをサブスクライブします。
• Down イベントが発生すると、Window Pointer Move イベントと Up イベントをサブスクライブし、マーカーを削除します。
• 移動中にいくつかのアクションを実行します。
• Up イベントが発火すると、Move および Up から登録解除されます。

これはマウス イベントでは機能しますが、タッチ イベントでは機能しません。Touch Start ターゲット要素が削除された後、それらは起動しません。Pointer Events Polyfillを使用しようとしましたが、どちらも機能しません。

タッチ イベントをエミュレートするために Chrome Dev Tools を使用しています。サンプルを参照してください。

IE <=10 でアプリに問題があります。

そして、私はIE でサポートするためにこのポリフィルを使用していますpointer-events: none

それでも要素をクリックすることはできますが、他のブラウザではできません。

私が間違っていることは何ですか？

HTML :

JS:

そしてプランカー：

なぜ私はまだポインタを無効にしていないのですか?