Internet Explorer で「pointer-events:none」をエミュレートする方法

Internet Explorer で Pointer-Events:none をエミュレートする

Web 開発の領域では、CSS プロパティ pointer-events:none が使用されています。ユーザーが基礎となる要素と対話できるようにするインタラクティブなオーバーレイを作成するために不可欠です。ただし、Internet Explorer は pointer-events:none を認識しないため、課題が生じます。

問題点

グラデーション PNG オーバーレイでグラフを強化しようとしている開発者は、次のような問題に直面しています。 Internet Explorer のジレンマ。チャートの対話性を維持するために pointer-events:none を使用すると、ブラウザーがこのプロパティをサポートしていないことと競合します。その結果、IE のユーザーは、強化されたチャート デザインを楽しむことと、チャートを操作することを同時に行うことができません。

解決策

ただし、pointer-events:none は一般要素として認識されません。 IE では、SVG 要素がサポートされています。この制限は、SVG 要素に対してのみポインター イベントを定義する仕様に起因します。

IE で pointer-events:none のような動作を実装するには、既存の要素を SVG 要素でラップすることを検討してください。このために、jQuery ライブラリによって提供されるラップ メソッドを利用できます。

コード例

CSS:

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

HTML:

<svg></svg>

追加の考慮事項

上層オブジェクトと下層オブジェクトの両方にアクセスする必要がある場合、IE は document.msElementsFromPoint を提供します。方法。このメソッドは、指定された時点のすべてのレイヤーの配列を返します。

Internet Explorer のこの癖を理解することで、開発者はこの課題を克服し、ブラウザーの設定に関係なく、すべてのユーザーの Web アプリケーションでのユーザー エクスペリエンスを向上させることができます。 .

以上がInternet Explorer で「pointer-events:none」をエミュレートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。