ボタンを押しても何もイベントが発生しない

Webアプリケーションを開発していてよくあるのがボタンやリンクを押しても何もイベントが起こらないといった問題です。これは特に動的に生成、描画したボタンやイベントの場合に起こります。

この時はまず、DOMのイベントリスナーをチェックしてイベントリスナー設定されているかどうか確認します。

Google Chromeの場合

Chromeの場合、Elementsタブの右側にEvent Listenersという項目が用意されています。ここでは画面中に設定されているイベントが一覧表示されます。

Firefox Developer Edisonの場合

Firefoxの場合はDOM表示の中にevという小さなアイコンが表示されます。これがあるDOMがイベントリスナーが設定されているものになります。

Safariの場合

Safariは要素タブの右側にイベントリスナーが一覧表示されています。ただし設定できるすべてのイベント名が出ているので、実際にイベントリスナーが設定されているかどうかは各項目を開いて確認する必要があります。

IEの場合

IEは該当のDOMをDOM Explorerで表示した時にイベント設定で確認ができます。具体的なコードまで追いかけることはできないようです。

イベントの確認としてはGoogle、Firefoxの画面中にあるイベントリスナーだけを素早く確認できるのが便利そうです。これを使って、まずはコーディングした通りにイベントリスナーが追加されているかどうかを確認しましょう。

イベント設定されている場合とされていない場合を知っておけば、デバッグ時に正しく判断できるようになります。jQueryなどを使っている場合はブラウザごとの差異を吸収して手軽にイベント設定できますが、それ以外のライブラリを使っている場合は特にチェックが欠かせません。