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

巴扎黑
リリース: 2017-09-20 09:51:15
オリジナル
3256 人が閲覧しました

この記事は主に 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!