CSS ポインターイベント属性の使用に関する詳細な説明

フロントエンド開発では、ユーザーと直接やり取りするため、ユーザーが操作がスムーズで快適だと感じ、ネイティブのような感覚を得られるよう全力を尽くすべきです。アニメーションは最も一般的に使用される方法です。

ここでの要件は、ポップアップ レイヤーのデザインです。このポップアップ レイヤーは、ネイティブのポップアップ レイヤーと同様に表示され、ボタンをクリックすると表示され、マスクまたはボタンをクリックすると閉じ、表示および閉じるときにアニメーション効果 (フェード、スライドなど) がなければなりません。

質問

ポップアップ レイヤーを閉じるときに、fadeOut アニメーション効果を例にとると、不透明度を 1 -> 0 に変化させて、徐々に消えるアニメーション プロセスをシミュレートします。コンテナーは、ポップアップ レイヤー コンポーネントの最も外側のコンテナーです。

。容器 {
    位置: 固定;
    左: 0;
    上: 0;
    幅: 100%;
    高さ: 100%;
    zインデックス: 9999;
    アニメーション: 0.5 秒のフェードアウト前へ;
}
@keyframes フェードアウト {
    0% {
        不透明度: 1;
    }
    100% {
        不透明度: 0;
    }
}

問題は、不透明度 0 ではコンテナー内の要素のみが透明になり、見えなくなるだけで、コンテナーは DOM ノード内にまだ存在することです。ポップアップ レイヤーのマスクに close イベントをバインドすると、コンテナーの z-index が非常に大きいため、マスク上で click イベントがトリガーされます。

transitionend および animationend イベント

上記の問題を解決し、より良いユーザー エクスペリエンスを提供するために、transitionend イベントと animationend イベントをリッスンしてアニメーション効果を実行した後、コンテナー ノードを非表示 (display: none) にすることができます。この方法では、マスクがクリック イベントを傍受する問題は発生しません。

導入

CSS テクノロジーを使用してアニメーション効果を生成すると、JS でアニメーションまたは変換の終了イベントをキャプチャできます。transitionend イベントと animationend イベントは標準のブラウザー イベントです。 CSS トランジションが終了した後に、transitionend イベントが発生します。

animationend イベントは、CSS アニメーションが完了したときに発生します (要素が見えなくなったり、アニメーションが要素から削除されたりなど、完了前に終了する状況は除きます)。

コード例:

/*
 * コンテナ要素の transitionend イベントをリッスンします。 * 次に、showMessage() などの関数を指定します。
 */
関数 showMessage() {
    console.log('移行が完了しました');
}
var 要素 = document.getElementById("コンテナ");
element.addEventListener("transitionend", showMessage, false);

ブラウザの互換性

transitionend イベントを例にとると、animationend イベントも同様です。

WebKit ブラウザでは依然として webkit プレフィックスが必要であることが分かるので、さまざまなブラウザに応じてイベントを個別に検出する必要があります。

欠点

私の要件は、このポップアップ レイヤー コンポーネントが頻繁に呼び出されること、つまり、ユーザーがポップアップ レイヤーを閉じた後に再度開かれることです。

このソリューションを使用すると、アニメーション終了イベントをリッスンして display:none と display:block を切り替えますが、これによりブラウザのレンダリング (再描画とリフロー) コストが増加し、ブラウザの互換性を考慮する必要があり、さまざまなブラウザに対してイベントを個別に検出する必要があります。

ポインターイベント CSS プロパティ

もっとエレガントでシンプルな解決策はあるでしょうか?それでは、主役であるポインター イベントを紹介しましょう。

このポインター イベントは、ポインター イベント (デバイス (マウス、ペン、タッチ スクリーンなど) からのハードウェア ポインター入力を処理するためのイベントおよび関連インターフェイス) とは異なることに注意してください。

導入

「pointer-events」プロパティは、特定のグラフィック要素がどのような状況でポインター イベントのターゲット要素になることができるかを指定します。これは、次の処理が行われる状況に影響します。

• マウスクリックなどのユーザーインターフェースイベント
• 動的疑似クラス（例::hover、:active、:focus; [CSS2]、セクション5.11）
• ハイパーリンク

つまり、pointer-events CSS プロパティは、特定のグラフィカル要素がどのような状況で (ある場合) マウス イベントのターゲットになることができるかを指定します。

仕様

HTML 要素への拡張は、CSS 基本ユーザー インターフェイス モジュール レベル 3 の初期ドラフトに存在していましたが、レベル 4 にまで引き上げられました。

これは主に SVG を対象としていますが、他の HTML 要素にも拡張されています。

文法

/* キーワード値 */
ポインタイベント: 自動;
ポインタイベント: なし;
ポインターイベント: visiblePainted; /* SVG のみ */
ポインターイベント: visibleFill; /* SVG のみ */
ポインターイベント: visibleStroke; /* SVG のみ */
ポインターイベント: 可視; /* SVG のみ */
ポインターイベント: ペイント済み; /* SVG のみ */
ポインターイベント: 塗りつぶし; /* SVG のみ */
ポインターイベント: ストローク; /* SVG のみ */
ポインターイベント: all; /* SVG のみ */

たとえば、pointer-events: visibleFill;

これは SVG にのみ適用されます。要素は、その visibility 属性が visible であり、マウス ポインターが要素内にある場合にのみ、マウス イベントのターゲットになります。fill 属性はイベント処理に影響しません。

SVG にのみ適用可能なその他の属性については、ここでは説明しません。

ここでは、2つの属性値[auto|none]に注目します。これら 2 つの属性値は、他の HTML 要素で使用する場合にも興味深いものになります。

値が自動の場合。これは、pointer-events 属性が指定されていない場合と同じように動作します。SVG コンテンツの場合、この値は visiblePainted と同じ効果を持ちます。

値が none の場合、要素はマウス イベントのターゲットにはなりません。つまり、値 none は、マウス イベントが要素を「貫通」し、要素の「下」にあるものをターゲットにすることを意味します。

ブラウザの互換性

ポインター イベントはほとんどのモバイル ブラウザーと互換性があり、プレフィックスの要件がないことがわかります。

注意すべき点

ポインター イベントの値が none の場合、必ずしも要素のイベント リスナーがトリガーされないことを意味するわけではありません。子要素に明示的なポインター イベント属性が設定されており、マウス イベントのターゲットとして指定されている場合、トリガー プロセスはイベント バブリングを通じて親要素に送信され、親要素のイベント リスニング イベントがトリガーされます。

要約する

ポップアップ レイヤー コンポーネントが頻繁に呼び出される可能性がある場合は、pointer-events ソリューションを使用します。つまり、マスクまたはボタンがクリックされたときに閉じる場合は、コンテナー アニメーション効果と point-events: none を設定し、ポップアップ レイヤーが表示される場合は point-events: auto を設定します。このように、CSS プロパティを変更するだけで問題を解決できます。

上記は CSS のポインター イベント属性の使用についての紹介です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。