為什么對復選框單擊事件的preventDefault對checked屬性返回true？

Question

我只是很好奇，需要對以下情況作一些解釋。

假設我有一個類型為checkbox的輸入元素，並附加了一個eventlistener，偵聽click事件。 我阻止復選框的默認行為並記錄復選框的選中狀態，該狀態將始終返回true。

復選框的可視化表示告訴我它沒有被選中。 所以我假設檢查狀態將返回false。 我相信這肯定是愚蠢的，我絕對會誤解這里的事情。 有趣的是，我也在記錄事件本身。 在目標屬性內部，checked屬性設置為false，就像我預期的那樣。

根據我的理解，防止默認將取消事件而不停止傳播，那么到底發生了什么？

如果有人可以在這一點上啟發我會很棒。 這是一個例子。

 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> 

Answer 1

實際上， click處理程序中checked值的結果取決於實現 。

正如我在多個瀏覽器中測試的那樣，在這種情況下，Chrome / Firefox / Safari / Opera將始終返回true，但如果您繼續單擊該復選框元素，則IE / Edge的行為會有點奇怪。

我在規范中找到了這一段，這可能是對這種不一致的解釋：

注意 ：在處理具有值為“radio”或“checkbox”的type屬性的input元素上的click事件期間，某些實現可能會在文檔中調度事件之前更改此屬性的值。 如果取消事件的默認操作，則可以將屬性的值更改回其原始值。 這意味着在處理單擊事件期間此屬性的值取決於實現。

但是當我刪除了preventDefault語句時，IE / Edge中的結果與其他瀏覽器一致，這讓我感到困惑。

所以我不認為這是IE / Edge的預期行為...因此我在Microsoft Connect上提交了一個錯誤 。

---

畢竟，如果我們假設Chrome的行為符合標准，那么以下可能是一個合適的解釋：

根據HTML規范 ， input[type=checkbox]元素的檢查性在取消的激活過程中恢復，該過程在事件處理程序之后根據激活部分進行。 因此，在執行事件處理程序期間，元素的檢查性尚未恢復。

（規范沒有明確說明已取消的激活步驟必須在所有事件處理程序之后;但是很容易推斷，否則無法確定事件的取消狀態）

Answer 2

根據w3schools的說法“preventDefault（）方法取消了該事件，如果它是可取消的，這意味着不會發生屬於該事件的默認操作。” click事件是可取消的（你可以像這個console.log一樣檢查它（“cancelable？”+ evt.cancelable）;.從我的理解，復選框對象的click事件的默認行為是讀取當前的狀態一個復選框，在true和false之間交替，從而將其狀態更改為checked和unchecked。簡言之，默認行為是切換;因此，preventDefault（）取消該行為。

關於復選框checked = true; unchecked = false 。如果你嘗試調試並逐步跟蹤eventListener，你會看到一旦你進入它，未經檢查的框即使在踩到evt.preventDefault（）后也會被“檢查”，所以當你調用console.log時（this.checked） ，evt.target.checked）; 那時，對於編譯器，你的盒子被“選中”， 只有當eventListener完成執行時 ， 復選框才會回到“未選中”狀態。 由此可以得出結論，在復選框的情況下，在執行事件偵聽器中的所有調用之后，最終實際激活（執行）preventDefault（） 。