addEventListener に return false でデフォルトキャンセルできない
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ onclick などのプロパティに関数を設定する方法でしか使えないので注意です
◆ 普段から preventDefault の方を使うようにしておくと楽して onclick = fn としても大丈夫
◆ 普段から preventDefault の方を使うようにしておくと楽して onclick = fn としても大丈夫
elem.onclick = fn
だったりelem.addEventListener("click", fn, false)
だったり書き方がふらふらしてる人は注意です
return false で デフォルトの動作をキャンセルすることができますが それは 上の形式だけです
onclick などの onxxxxx プロパティに関数を代入する方法では return false でキャンセルできますが addEventListener を使うとそれができません
サンプルページ
ここのそれぞれを押すとこうなります
(1). onclick + return false
(2). onclick + preventDefault
(3). addEventListener + return false
(3). hrefが呼び出されました
(4). addEventListener + preventDefault
(2). onclick + preventDefault
(3). addEventListener + return false
(3). hrefが呼び出されました
(4). addEventListener + preventDefault
(3) の addEventListener と return false の組み合わせでだけキャンセルされてないので href の JavaScript が実行されています
普段 preventDefault だったのにたまに手抜きして return false を使ったせいでハマってしまいました
みなさんも注意してください