对于《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事件后，你也不能说它什么，对吧？ 这种规范顾及不到的细枝末节，就称为“未定义行为”。