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

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

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

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

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

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

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

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

一般的なシナリオ

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

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

 .j-pro{ pointer-events: none; }  提交  submit: function(){ this.data.flag = true; this.$request(url, { // ... onload: function(json){ if(json.retCode == 200){ this.data.flag = false; } }.bind(this) // ... }); }

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

 .layer{ backround: linear-gradient(180deg, #fff, transparent); } .j-pro{ poninter-events: none; }  
 
 
 
 
 

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

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