css3ポインタイベントの使い方の詳しい説明

この記事は主に css3 ポインターイベントを紹介します。編集者はそれを参考として共有します。エディターをフォローして一緒に見てみましょう

ポインターイベントとは何ですか?

その名前が示すように、pointer-events は HTML ポインター イベントに使用される属性です。

ポインターイベントは、HTML 要素のホバー/フォーカス/アクティブなどの動的効果を無効にすることができます。

デフォルト値は auto です。構文:

コードは次のとおりです。 | fill | ストローク | all;

他の属性は SVG 要素にのみ適用されることに注意してください。 auto: ポインターイベントを使用できます。

none: ポインター イベントを無効にする ポインターが無効になっている要素に子/親要素がある場合、タイム バブリング/キャプチャ フェーズ中にイベントがその子/親要素でトリガーされることに注意してください。

一般的なシナリオ

1. ラベルイベント効果を無効にする

タブを切り替えるとき、現在の項目が選択されている場合、現在のタブのイベントは他のタブを切り替えるときにのみ無効になります。

<!--CSS-->
 <style>
     .active{
         pointer-events: none;
     }
 </style>
 <!--HTML-->
 <ul>
     <li><a class="tab"></a></li>
     <li><a class="tab active"></a></li>
     <li><a class="tab"></a></li>
 </ul>

2. ボタンのオン/オフ状態を切り替えます

送信ボタンをクリックしたときに、リクエストが結果を返さないときに、ユーザーがボタンをクリックし続けてリクエストを送信することを防ぐために、これを防ぐために、ボタンに pointer-events: none を追加します。 この状況はビジネスでも非常に一般的です。

<!--CSS-->
 .j-pro{
     pointer-events: none;
 }
 <!--HTML-->
 <button r-model={this.submit()} r-class={{"j-pro": flag}}>提交</button>
 <!--JS-->
 submit: function(){
     this.data.flag = true;
     this.$request(url, {
         // ...
         onload: function(json){
             if(json.retCode == 200){
                 this.data.flag = false;
             }
         }.bind(this)
         // ...
     });
 }

3. 要素の上に他の要素がある場合、透明な要素とクリック可能な要素が重なってクリックできなくなるのを防ぐ

一部のコンテンツの表示領域で見栄えの良い CSS 効果を実現するにはそれをカバーして、以下の要素のイベントに影響を与えないように、カバーされた要素に pointer-events: none; を追加すると問題を解決できます。

<!--CSS-->
 .layer{
     backround: linear-gradient(180deg, #fff, transparent);

 }
 .j-pro{
     poninter-events: none;
 }
 <!--HTML-->
 <ul>
     <li class="layer j-pro"></li>
     <li class="item"></li>
     <li class="item"></li>
     <li class="item"></li>
 </ul>

ポンインターイベントの互換性

以上がcss3ポインタイベントの使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。