ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでボタンの無効化を制御する方法
CSSでボタンの無効化を制御する方法
- 青灯夜游オリジナル
- 2021-01-19 15:46:046564ブラウズ
方法: ボタン要素に「pointer-events:none;」スタイルを追加して、ボタン要素がマウス イベントのターゲットにならないようにし、クリック イベントを無効にして、ボタンが使用できないように制御します。
このチュートリアルの動作環境: Windows7 システム、css3&&html5 バージョン、Dell G3 コンピューター。
(学習ビデオ共有: css ビデオ チュートリアル)
HTML では、HTML の無効属性または読み取り専用属性を直接使用して、CSS 内でボタンをクリックできないようにすることができます。 , pointer-events 属性を使用して、クリック イベントを無効にすることができます。
「pointer-events:none」という 2 つの CSS スタイルをボタンに追加して、ボタンをクリックできないようにすることができます。
pointer-events 属性 要素がマウス イベントのターゲットではないことを示すだけでなく、値 none は、マウス イベントが要素を「貫通」し、要素の「下」にあるものを指定することを示します。ボタンのクリックイベントを無効にします。
例: CSS によりボタンが使用できなくなります
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button {
opacity: 0.5;
/*设置蒙版效果*/
pointer-events: none;
/*禁止鼠标事件*/
}
</style>
</head>
<body>
<button>php中文网</button>
</body>
</html>説明:
pointer-events:none スタイルが設定された要素は、マウス イベントのターゲットになりません。ただし、マウス イベントは、その pointer-events 属性が別の値を指定している場合、子孫要素に送信することができます。その場合、マウス イベントは、キャプチャまたはバブリング フェーズ中に親要素のイベント リスナーをトリガーします。
ポインター イベントを使用して要素がマウス イベントのターゲットになるのを防ぐことは、必ずしも要素のイベント リスナーが起動しないことを意味するわけではありません。要素の子孫が明示的に pointer-events 属性を指定し、それがマウス イベントのターゲットになることを許可している場合、その要素を指すすべてのイベントは、イベントの伝播中に親要素を介して伝播し、適切な方法でその要素のイベント リスナーをトリガーします。 。もちろん、親要素上にあるが子孫要素上にはない画面上のマウス アクティビティは、親要素と子孫要素によってキャプチャされません (親要素を通過し、その下にある要素をポイントします)。
プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！
以上がCSSでボタンの無効化を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。