Internet Explorer で非 SVG 要素に対して「pointer-events: none」をエミュレートするにはどうすればよいですか?

Internet Explorer での pointer-events:none のエミュレーション

Internet Explorer では、pointer-events:none CSS プロパティを使用して許可するときに問題が発生します階層化された要素とのユーザーインタラクション。このプロパティは、特定の要素のマウス イベントを無視するために使用され、SVG 要素に対して IE によってのみ認識されます。

制限の克服

この制限にもかかわらず、IE は代替ソリューション。既存の要素を SVG 要素でラップすると、必要な機能を保持できます。 jQuery の Wrap メソッドを使用すると、このプロセスを簡素化できます。

例

グラフを PNG グラデーションで覆い、グラフの対話性を維持したいとします。これは、次のコードを使用して実装できます。

**CSS:**

#tryToClickMe {
  pointer-events: none;
  width: 400px;
  height: 400px;
  background-color: red;
}

**HTML:**

<svg></svg>

上位オブジェクトと下位オブジェクトへのアクセス

SVG オーバーレイの下にある要素を操作する必要がある場合は、 IE の document.msElementsFromPoint メソッド。このメソッドは、指定された点上のすべてのレイヤーの配列を提供します。

結論

IE では pointer-events:none がネイティブにサポートされていませんが、SVG 要素とdocument.msElementsFromPoint メソッドは、ユーザーがグラフを操作し、強化されたデザインを維持できるようにする包括的なソリューションを提供します。

以上がInternet Explorer で非 SVG 要素に対して「pointer-events: none」をエミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。