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中工作

回答

相关问题