ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS pointer-events 属性の使用方法の詳細な説明

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

青灯夜游転載: 2018-10-11 17:11:392862ブラウズ

この記事は主に 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(&#39;Transition 已完成&#39;);
}
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 ビデオチュートリアルをご覧ください。

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

関連記事