對於《CSS世界》中未定義行爲舉例的理解

最近在讀張鑫旭的《CSS世界》，談談對於第二章最後關於未定義行爲舉例的一些理解。

HTML代碼

<a href="javascript:" class="active-btn">按下</a>
<a href="javascript:" id="button" class="active-btn">按下</a>
複製代碼

CSS代碼

.active-btn {
    display: inline-block; 
    background-color: #cd0000;
    }
.active-btn:active {
    background-color: #ae0000;
    }
複製代碼

JavaScript代碼

var button = document.getElementById("button");
if (button.addEventListener) {
    button.addEventListener("mousedown", function(event) {
        // 此處省略N行
        event.preventDefault();    
    });
}
複製代碼

代碼運行在IE/Chrome瀏覽器時，點擊按鈕後而且拖動，按鈕底色變深色(觸發了 :active)，而且拖動沒有默認的效果。

但代碼運行在Firefox瀏覽器中時，點擊按鈕後而且拖動，按鈕顏色沒有發生變化(沒有觸發:active)，拖動沒有默認的效果。

示例中的js代碼做用是在mousedown事件結束後，阻止按鈕的默認行爲，目的主要是防止拖動。達到拖動效果流暢的效果。

相同的代碼在IE/Chrome瀏覽器和Firefox瀏覽器運行時產生了不一樣的效果。

緣由在於：

在IE/Chrome瀏覽器中，認爲:active發生在mousedown以前，因此在IE/Chrome瀏覽器中運行後，點擊按鈕也能夠觸發:active的變化（背景變深色）

但Firefox瀏覽器中運行時，認爲:active發生在mousedown以後，js代碼取消了mousedown後按鈕的默認事件(包含:active)，因此點擊按鈕後沒有觸發active的變化（背景無變色）。 IE/Chrome和Firefox瀏覽器中，都防止了拖動，區別在於，IE/Chrome瀏覽器觸發了:active，在Firefox中沒有觸發:active。

就像做者原話

因此Firefox認爲:active發生在mousedown事件後，你也不能說它什麼，對吧？ 這種規範顧及不到的細枝末節，就稱爲「未定義行爲」。