【HTML/CSS】divで作られたボタンをdisableにしたのにクリックイベントが発火する原因と対策

この記事は何

最近、フォームの送信ボタンをグレーアウトして、再度クリックされないようにする実装を行いました。一見ボタンがグレーアウトされて無効になっているように見えたのですが、実際にはグレーアウトした後にクリックされると、イベントが発火してしまい、思わぬバグが発生しました。
この記事では、その原因と対策について共有したいと思います。

発生した問題

以下のようなコードを使って、送信ボタンを無効化しようとしました。

<div class="inputBtn" id="submitButton" onclick="hoge();">上記の内容で送信する</div>

そして、ボタンがクリックされた後に無効化するためのJavaScriptを次のように実装しました。

function disableSendButton() {
    let sendButton = document.getElementById('submitButton');
    sendButton.removeAttribute('onclick');
    sendButton.disabled = true;
    sendButton.style.opacity = 0.5;
    sendButton.style.cursor = 'not-allowed';
}

しかし、見た目ではボタンがグレーアウトしているのに、クリックイベントがまだ発火してしまう現象が発生しました。

問題の原因

この問題の原因は、div要素には通常のbutton要素と異なり、disabled属性が存在しないため、disabledプロパティを設定しても機能しないことにあります。

また、onclickイベントを解除しても、div自体がクリック可能な状態のままであるため、クリックイベントが引き続き発火してしまいました。

解決方法

この問題を解決するためには、div要素のクリックを完全に無効化するために、CSSのpointer-eventsプロパティを使用します。

修正後のコードは以下の通りです。

function disableSendButton() {
    let sendButton = document.getElementById('submitButton');
    sendButton.removeAttribute('onclick');
    sendButton.style.opacity = 0.5;
    sendButton.style.cursor = 'not-allowed';
    sendButton.style.pointerEvents = 'none'; // クリックを無効化する
}

pointer-events: none;を設定することで、その要素がクリックなどのポインターイベントを受け取らなくなり、クリックイベントが発火しなくなります。

まとめ

button 要素の場合は最初のコードでいけたので使いまわせると思ったら、div だと使えないということを知らず、ちょっと躓きました。
何かの参考になれば幸いです。