CSSでボタンの無効化を制御する方法

方法: ボタン要素に「pointer-events:none;」スタイルを追加して、ボタン要素がマウス イベントのターゲットにならないようにし、クリック イベントを無効にして、ボタンが使用できないように制御します。

このチュートリアルの動作環境: Windows7 システム、css3&&html5 バージョン、Dell G3 コンピューター。

(学習ビデオ共有:css ビデオ チュートリアル)

HTML では、HTML の無効属性または読み取り専用属性を直接使用して、CSS 内でボタンをクリックできないようにすることができます。 , pointer-events 属性を使用して、クリック イベントを無効にすることができます。

「pointer-events:none」という 2 つの CSS スタイルをボタンに追加して、ボタンをクリックできないようにすることができます。

pointer-events 属性 要素がマウス イベントのターゲットではないことを示すだけでなく、値 none は、マウス イベントが要素を「貫通」し、要素の「下」にあるものを指定することを示します。ボタンのクリックイベントを無効にします。

例: CSS によりボタンが使用できなくなります

     
  php中文网  

説明:

pointer-events:none スタイルが設定された要素は、マウス イベントのターゲットになりません。ただし、マウス イベントは、その pointer-events 属性が別の値を指定している場合、子孫要素に送信することができます。その場合、マウス イベントは、キャプチャまたはバブリング フェーズ中に親要素のイベント リスナーをトリガーします。

ポインター イベントを使用して要素がマウス イベントのターゲットになるのを防ぐことは、必ずしも要素のイベント リスナーが起動しないことを意味するわけではありません。要素の子孫が明示的に pointer-events 属性を指定し、それがマウス イベントのターゲットになることを許可している場合、その要素を指すすべてのイベントは、イベントの伝播中に親要素を介して伝播し、適切な方法でその要素のイベント リスナーをトリガーします。 。もちろん、親要素上にあるが子孫要素上にはない画面上のマウス アクティビティは、親要素と子孫要素によってキャプチャされません (親要素を通過し、その下にある要素をポイントします)。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がCSSでボタンの無効化を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。