I am just curious and need some explanation on the following situation.
Let's say i have an input element of type checkbox with an eventlistener attached to it, listening for the click event. I prevent the default behavior of the checkbox and log the checked state of the checkbox, which will always return true.
The visual representation of the checkbox is telling me that it is not checked. So i would assume that the checked state would return false. I am sure this must be something silly and i am definitively misunderstanding something here. The funny thing is, i am logging the event itself as well. Inside of the target property the checked property is set to false, just as i would have expected.
From my understanding, prevent default will cancel the event without stopping propagation, so what exactly is happening here?
It would be great if someone could enlighten me on this one. Here is the example.
var checkbox = document.getElementsByTagName('input')[0],
output = document.getElementById('output');
checkbox.addEventListener('click', function(evt) {
evt.preventDefault();
output.innerHTML = "Checkbox checked attribute is " + this.checked;
console.log(this.checked, evt.target.checked);
console.log(evt);
}, false);
<input type="checkbox" id="my-checkbox" />
<label for="my-checkbox">Checkbox with preventDefault().</label>
<div id="output"></div>
Aucun commentaire:
Enregistrer un commentaire