Question

我遇到了一个奇怪的问题，我需要一些帮助来解决这个问题。我有一个简单的按钮，里面有一个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>

我只需要向mousedown元素添加.mask侦听器。简单吧？
很好..原来Firefox有一些问题。

请检查现场演示：https://jsfiddle.net/fzwbb3dp/
当你打开控制台时，你可以在Chrome后看到单击按钮，控制台在mousedown事件上记录正确的消息。
但在Firefox控制台中没有显示。

此时我完全不知道这是什么来源如果您能为我提供如何解决此问题的一些指导，我将非常感谢。

谢谢。

Answer 1

我认为这里的问题是你以一种不受支持的方式使用<button>标签，而Firefox则是一个坚持不懈的人。

根据MDN，<button>元素可能只包含phrasing content - 这不包含<div>个元素。如果您将父button更改为div，则可以很好地播放（尽管您必须重写CSS）。

mousedown监听器在Firefox上的绝对定位元素上不起作用

1 个答案: