この記事では、CSS を使用してクリック イベントを無効にする方法を学習します。
それでは始めましょう！
CSSを使用してクリックイベントを無効にする方法は?
CSS「 ポインタイベント ' 財産。しかし、それに飛び込んで、簡単に説明します。
「pointer-events」CSS プロパティとは何ですか?
「 ポインタイベント 」は、HTML 要素がタッチ イベントにどのように応答または動作するか (クリックまたはタップ イベント、アクティブまたはホバー状態、カーソルを表示するかどうかなど) を制御します。
構文
ポインター イベントの構文は次のとおりです。
ポインタイベント : 自動 | | なし ;
上記のプロパティは、次のような 2 つの値を取ります。 自動 ' と ' なし 」：
- 自動: デフォルトのイベントを実行するために使用されます。
- なし： イベントを無効にするために使用されます。
注: 以下の例では、最初に 2 つのアクティブなボタンを追加する方法を示し、次に 2 番目のボタンのクリック イベントを無効にします。
例 1: CSS を使用してボタンのクリック イベントを無効にする
この例では、見出し
と 2 つのボタンを作成します。次に、「 ボタン 」を最初のボタンのクラス名として割り当て、「 ボタン ' と ' ボタン2 」を 2 番目のボタンのクラスとして指定します。
HTML
< 分周 >< h1 > CSS を使用してクリック イベントを無効にする < / h1 >
< ボタン クラス = 'ボタン' > 有効化ボタン < / ボタン >
< ボタン クラス = 「ボタンボタン2」 > 無効化ボタン < / ボタン >
< / 分周 >
CSSでは、「 。ボタン 」は、HTML ファイルで作成された両方のボタンにアクセスするために使用されます。次に、ボーダースタイルを「 なし 」とパディングを「 25px 」。その後、ボタンテキストの色を「 RGB(29, 6, 31) 」、ボタンの背景は「 RGB(19, 192, 163) 」。また、ボタンの半径を「 5px 」。
CSS
。ボタン {国境 : なし ;
パディング : 25px ;
色 : RGB ( 29 、 6 、 31 ) ;
背景色 : RGB ( 19 、 192 、 163 ) ;
境界半径 : 5px ;
}
その後、両方のボタンに :active 疑似クラスを「 .button:アクティブ 」とし、ボタンの色を「 RGB(200, 255, 0) 」：
。ボタン : アクティブ {背景色 : RGB ( 209 、 65 、 65 ) ;
}
その結果、次の結果が表示されます。
次に、2 番目のボタンのクリック イベントを無効にする次の部分に進みます。
これを行うには、「 .button2 」を使用して、HTML ファイルで作成された 2 番目のボタンにアクセスし、その後、pointer-events プロパティの値を「 なし 」：
.button2 {ポインタイベント : なし ;
}
pointer-events プロパティを使用してその値を non に設定すると、クリック イベントが無効になります。これは、次の出力で確認できます。
CSS を使用してクリック イベントを無効にする最も簡単な方法を提供しました。
結論
HTML でクリック イベントを無効にするには、「 ポインタイベント CSSの”プロパティを利用しています。この目的のために、HTML 要素を追加し、pointer-events プロパティの値を「 なし 」をクリックしてクリックイベントを無効にします。この記事では、CSS を使用してクリック イベントを無効にする方法とその例を説明しました。