CODEWITHSUNDEEP
javascriptcssfirefox
Indy
Indy

Reputation: 4957

mousedown listener doesn't work in Firefox on absolute positioned element

I ran into a strange problem and I need some help to figure this thing out. I have simple button with one div inside (which has position: absolute), here's the code:

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>

All I need is to add mousedown listener to the .mask element. Simple right?
Well.. turns out Firefox has some problem with that.

Please check live demo: https://jsfiddle.net/fzwbb3dp/
When you open console, you can see that in Chrome after you click the button, console logs correct message on mousedown event.
but nothing shows in Firefox console.

At this point I have completely no idea what is the source of this problem, so I will really appreciate if you can provide some guidance to me how to fix this issue.

Thank you.

Upvotes: 1

Views: 456

Answers (1)

Alexander Nied
Alexander Nied

Reputation: 13678

I think the issue here is that you are using the <button> tag in a somewhat unsupported manner, and Firefox is being a stickler about it.

Per MDN, the <button> element may only contain phrasing content -- this does not include <div> elements. If you change the parent button to a div it plays nicely (although you'll have to rewrite your CSS).

Upvotes: 3

Related Questions