/タイトル通り、今回は要素に対するタッチやクリックを無効化する方法について。
button要素であれば、下記のように disabled を指定すれば、クリックができなくなりますが、それをdiv要素などで行う場合です。
1 | <button type="submit" disabled>無効化されたボタン</button> |
使うプロパティは「pointer-events」です。
こちらのプロパティは、初期値は auto が指定されています。
この値に、none を指定することで、要素に対するクリック・タップを無効化することができます。
サンプルはこんな感じ。
1 2 3 | <div> <p>無効化された要素</p></div> |
1 2 3 | div { pointer-events: none;} |
1 2 3 | $("div").on("click", function(){ alert("div click!");}); |
こちらを実行すると、div要素をクリックしてもアラートが表示されません。
ちなみに、スマートフォンでも動作します。
ということで、div要素などのクリック・タップを無効化する方法でした。
なかなか、butto要素以外でクリック・タップをすることはないかもしれませんが…知っていれば便利です。
是非参考にしてください。
