【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要素以外でクリック・タップをすることはないかもしれませんが…知っていれば便利です。
是非参考にしてください。