checkbox の preventDefault
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ change イベントはすでに変わったというイベントなのでキャンセルしてもチェック状態は変更されます
◆ click イベントをキャンセルするとチェック状態の変更を防げます
◆ 変更されないので change イベントが発生しなくなります
◆ click のリスナの中ではチェック状態が変更されていて キャンセルするとリスナの関数の終了時に元に戻ります
◆ indeterminate でも一緒
◆ click イベントをキャンセルするとチェック状態の変更を防げます
◆ 変更されないので change イベントが発生しなくなります
◆ click のリスナの中ではチェック状態が変更されていて キャンセルするとリスナの関数の終了時に元に戻ります
◆ indeterminate でも一緒
チェックボックスに click と change のリスナをつけて リスナが呼び出された時のチェック状態と preventDefault() したときの変化がちょっと以外でした
サンプル
開発者ツールのコンソールを表示しながらクリックしてください
c1, c2, c3 のチェックボックスがあって c1 は change と click でそのときのチェック状態と setTimeout でリスナ終了後のチェック状態を表示します
c2 は c1 に preventDefault を追加したものです
c3 は c2 から click のリスナを除去しています
結果はこんな感じです
c1 はキャンセルされないのでクリック毎に ON/OFF が切り替わります
また クリックのタイミングですでにチェック状態は切り替わっていて リスナ終了後もチェック状態はそのままです
c2 はクリックでは クリックイベント時は checked が true です
preventDefault をしてもリスナ中は true です
リスナの呼び出しが終わるとキャンセルされて元に戻ります
setTimeout の 0ms 後では false になっています
また preventDefault されるので 変更が起きないので change イベントは発生しません
切り替えが起きないので 何度押しても同じ結果です
c3 では c1 と同じように切り替えが発生しますし リスナ後に変化もないです
チェック状態の切り替えはクリックイベントで行われているので change をキャンセルしてもチェック状態が変わらなくなるわけではないです
var c1 = document.querySelector("#c1")
var c2 = document.querySelector("#c2")
var c3 = document.querySelector("#c3")
c1.onclick = function(){
console.log("c1-click", this.checked)
setTimeout(_ => console.log("c1-click-after", this.checked), 0)
}
c1.onchange = function(){
console.log("c1-change", this.checked)
setTimeout(_ => console.log("c1-change-after", this.checked), 0)
}
c2.onclick = function(eve){
eve.preventDefault()
console.log("c2-click", this.checked)
setTimeout(_ => console.log("c2-click-after", this.checked), 0)
}
c2.onchange = function(eve){
eve.preventDefault()
console.log("c2-change", this.checked)
setTimeout(_ => console.log("c2-change-after", this.checked), 0)
}
c3.onchange = function(eve){
eve.preventDefault()
console.log("c3-change", this.checked)
setTimeout(_ => console.log("c3-change-after", this.checked), 0)
}
var c2 = document.querySelector("#c2")
var c3 = document.querySelector("#c3")
c1.onclick = function(){
console.log("c1-click", this.checked)
setTimeout(_ => console.log("c1-click-after", this.checked), 0)
}
c1.onchange = function(){
console.log("c1-change", this.checked)
setTimeout(_ => console.log("c1-change-after", this.checked), 0)
}
c2.onclick = function(eve){
eve.preventDefault()
console.log("c2-click", this.checked)
setTimeout(_ => console.log("c2-click-after", this.checked), 0)
}
c2.onchange = function(eve){
eve.preventDefault()
console.log("c2-change", this.checked)
setTimeout(_ => console.log("c2-change-after", this.checked), 0)
}
c3.onchange = function(eve){
eve.preventDefault()
console.log("c3-change", this.checked)
setTimeout(_ => console.log("c3-change-after", this.checked), 0)
}
サンプル
開発者ツールのコンソールを表示しながらクリックしてください
c1, c2, c3 のチェックボックスがあって c1 は change と click でそのときのチェック状態と setTimeout でリスナ終了後のチェック状態を表示します
c2 は c1 に preventDefault を追加したものです
c3 は c2 から click のリスナを除去しています
結果はこんな感じです
c1-click true
c1-change true
c1-click-after true
c1-change-after true
c1-click false
c1-change false
c1-click-after false
c1-change-after false
c2-click true
c2-click-after false
c3-change true
c3-change-after true
c3-change false
c3-change-after false
c1-change true
c1-click-after true
c1-change-after true
c1-click false
c1-change false
c1-click-after false
c1-change-after false
c2-click true
c2-click-after false
c3-change true
c3-change-after true
c3-change false
c3-change-after false
c1 はキャンセルされないのでクリック毎に ON/OFF が切り替わります
また クリックのタイミングですでにチェック状態は切り替わっていて リスナ終了後もチェック状態はそのままです
c2 はクリックでは クリックイベント時は checked が true です
preventDefault をしてもリスナ中は true です
リスナの呼び出しが終わるとキャンセルされて元に戻ります
setTimeout の 0ms 後では false になっています
また preventDefault されるので 変更が起きないので change イベントは発生しません
切り替えが起きないので 何度押しても同じ結果です
c3 では c1 と同じように切り替えが発生しますし リスナ後に変化もないです
チェック状態の切り替えはクリックイベントで行われているので change をキャンセルしてもチェック状態が変わらなくなるわけではないです