mousedown偵聽器在絕對定位元素上無法在Firefox中工作

我遇到了一個奇怪的問題，我需要一些幫助來弄清楚這件事情。我有一個DIV中（其位置：絕對）簡單的按鈕，下面的代碼：mousedown偵聽器在絕對定位元素上無法在Firefox中工作

document.querySelector('.mask') 
 
    .addEventListener('mousedown', e => console.log(e.type))

button { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 60px; 
 
    background: none; 
 
    border: 1px solid #1c90f3; 
 
} 
 
.mask { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(28, 144, 243, 0.2); 
 
}

<button type="button"> 
 
    click 
 
    <div class="mask"></div> 
 
</button>

所有我需要的是mousedown監聽器添加到.mask元素。簡單的權利？
呃..事實證明Firefox有一些問題。

請檢查現場演示：https://jsfiddle.net/fzwbb3dp/
當您打開控制檯時，您可以看到在點擊按鈕後，Chrome會在mousedown事件中記錄正確的消息。
但在Firefox控制檯中沒有顯示。

在這一點上，我完全不知道這個問題的根源是什麼，所以我會非常感謝，如果你能爲我提供一些指導如何解決這個問題。

謝謝。

來源

2016-12-05 covfefe

我會認爲這是因爲Firefox有更好的按鈕規則，並讓他們如何應該，檢查出[這個問題]（http://stackoverflow.com/questions/26402033/missing-click-event-for-span -inside-button-element-on-firefox）來解決問題。 – George

@cookieMan如果您將.mask更改爲按鈕，那麼它將起作用，但隨後會出現一個新問題，即每個按鈕都會與此事件綁定。 –

我認爲這裏的問題在於，您以某種不受支持的方式使用<button>標記，並且Firefox正在對此進行標記。

每MDN，所述<button>元件可能只包含phrasing content - 這樣做不包括<div>元件。如果將父button更改爲div，它會很好地發揮作用（儘管您必須重寫CSS）。

來源

2016-12-05 13:27:17

謝謝。這非常有幫助，但其他瀏覽器沒有問題，這很奇怪。 – covfefe

是的 - 關於Web開發的奇怪之處在於您的代碼被部署在多個不同的平臺上 - 每個平臺都有不同的W3規範實現。舊的Internet Explorer通常無法正確或完全實現規格---同樣，當您編寫不完全遵循語法或結構規則的代碼時，較新的瀏覽器會提供不同級別的「寬恕」。這就是其中一種情況--Chrome可能會讓你滿意，但Mozilla認爲他們不會投入工作來支持格式不正確的HTML。 –

mousedown偵聽器在絕對定位元素上無法在Firefox中工作

回答

相關問題