CSS pointer-events 属性の使用方法の詳細な説明

この記事は主に CSS ポインター イベント属性の使用法を紹介しています。必要な方は参考にしていただければ幸いです。

フロントエンド開発ではユーザーと直接接するため、ユーザーが快適に操作できる、ネイティブライクな操作感が得られるよう最大限の努力をする必要があります。アニメーションは最も一般的に使用される方法です。

ここでの要件は、弾性レイヤーのデザインです。この弾性レイヤーは、ボタンをクリックすると表示され、マスクまたはボタンをクリックすると閉じ、アニメーションが含まれるようにする必要があります。表示時と終了時のエフェクト (フェード、スライドなど)。

質問

弾性レイヤーを閉じるとき、フェードアウト アニメーション効果を例に挙げます。 1 -> 0 の不透明度プロセスを使用して、徐々に消えていくアニメーション プロセスをシミュレートします。 コンテナーは、弾性レイヤー コンポーネントの最も外側のコンテナーです。

.container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    animation: .5s fadeOut forwards;
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

問題は、不透明度が 0 の場合、要素のみが表示されることです。コンテナは透明で非表示です。 コンテナは引き続き dom ノードに存在します。 close イベントを弾性レイヤーのマスクにバインドすると、コンテナーの Z インデックスが非常に大きいため、マスク上でクリック イベントがトリガーされます。

transitionend イベントとanimationend イベント

上記の問題を解決し、ユーザー エクスペリエンスを向上させるために、transitionend イベント、animationend イベント、およびその他のアニメーション効果を事前にリッスンできます。コンテナノードを非表示で実行しています（表示：なし）。この方法では、マスクがクリック イベントをインターセプトするという問題は発生しません。

はじめに

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

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

コード例:

/*
 * 在container元素上监听transitionend事件
 * 然后指定一个函数, 例如 showMessage()
 */
function showMessage() {
    console.log('Transition 已完成');
}
var element = document.getElementById("container");
element.addEventListener("transitionend", showMessage, false);

ブラウザ互換性

transitionend イベントを例に挙げます。animationend イベントも同様です。

WebKit ブラウザでは Webkit プレフィックスを使用する必要があることがわかり、さまざまなブラウザに従ってイベントを検出する必要があります。

欠点

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

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

pointer-events CSS プロパティ

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

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

はじめに

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

• ##マウスクリックなどのユーザーインターフェイスイベント

• 動的疑似クラス (つまり、:hover、:active、:focus; [CSS2]、セクション 5.11)

• ハイパーリンク

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

仕様

HTML 要素への拡張機能は、CSS 基本ユーザー インターフェイス モジュール レベル 3 の初期ドラフトに存在していましたが、レベル 4 にプッシュされました。

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

構文

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

たとえば、pointer-events:visibleFill;

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

SVG にのみ適用されるその他の属性については、ここでは詳しく説明しません。

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

値が auto の場合。パフォーマンス上の効果は、pointer-events 属性が指定されていない場合と同じです。SVG コンテンツの場合、この値はvisiblePainted と同じ効果を持ちます。

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

ブラウザの互換性

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

注意事項

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

概要

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

上記は、紹介した CSS pointer-events 属性の全内容です。学習に役立つことを願っています。関連チュートリアルの詳細については、 CSS ビデオ チュートリアル 、 CSS3 ビデオ チュートリアル をご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

CSS オンライン マニュアル

CSS3 オンライン マニュアル

##div/css グラフィック チュートリアル

#css3 特殊効果コード集

以上がCSS pointer-events 属性の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。