浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】要素のタッチやクリックを無効にするpointer-eventsプロパティ

/タイトル通り、今回は要素に対するタッチやクリックを無効化する方法について。
button要素であれば、下記のように disabled を指定すれば、クリックができなくなりますが、それをdiv要素などで行う場合です。

<button type="submit" disabled>無効化されたボタン</button>

 

使うプロパティは「pointer-events」です。
こちらのプロパティは、初期値は auto が指定されています。
この値に、none を指定することで、要素に対するクリック・タップを無効化することができます。

サンプルはこんな感じ。

<div>
    <p>無効化された要素</p>
</div>
div {
    pointer-events: none;
}
$("div").on("click", function(){
    alert("div click!");
});

こちらを実行すると、div要素をクリックしてもアラートが表示されません。
ちなみに、スマートフォンでも動作します。

 

ということで、div要素などのクリック・タップを無効化する方法でした。
なかなか、butto要素以外でクリック・タップをすることはないかもしれませんが…知っていれば便利です。
是非参考にしてください。

  • この記事いいね! (8)