絶対配置された要素のFirefoxでmousedownリスナーが機能しない

Question

私は奇妙な問題に遭遇しました。私は（ポジションがあります。絶対）1体のdivの内側と簡単なボタンがあり、ここではコードです：

は

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>

私に必要なのは.mask要素にmousedownリスナーを追加することです。単純な権利ですか？
さて、Firefoxにはいくつか問題があります。

ライブデモを確認してください：https://jsfiddle.net/fzwbb3dp/
コンソールを開くと、ボタンをクリックした後にChromeでmousedownイベントにコンソールに正しいメッセージが記録されます。
Firefoxのコンソールには何も表示されません。

この問題の原因が何であるかは完全にはわかりませんので、この問題を解決する方法を教えてください。

ありがとうございます。

Answer 1

ここでの問題は、あなたが幾分サポートされていない方法で<button>タグを使用しているということです。Firefoxはそれについて固執しています。

パーMDN、<button>要素だけphrasing contentが含まれていてもよい - これはないを行い<div>要素を含みます。親buttonをdivに変更すると、うまく再生されます（ただし、CSSを書き直す必要があります）。