Does .mouseover and .mouseout still function on a disabled button?

Question

I have spent a long time making this website and I am panicking.

For months if not years my syntax was working fine.

Everything works like a domino effect. Mostly every button is disabled. You click a button, and like a rabbit hole, specific buttons enable and disable with every subsequent click.

Now when I open the site. It's like the code just shat itself and isn't reading anything properly. I move the mouse around and everything that's embedded in a mouseover event is working when it's not supposed to.

Section of my code:

var art2 = document.getElementById('drawing2');
var art3 = document.getElementById('drawing3');
var art4 = document.getElementById('drawing4');
var arttext = document.getElementById('drawingtext');
var arttext2 = document.getElementById('drawingtext2');

playface.addEventListener('mouseover', playface);
stopface.addEventListener('mouseout', stopface);

function playface() {
  art3.classList.add('intervention');
  setTimeout(() => {
    art3.classList.remove('intervention');
  }, 650);
  setTimeout(() => {
    art3.classList.add('creep');
  }, 651);
  setTimeout(() => {
    art3.classList.remove('creep');
  }, 1020);
  setTimeout(() => {
    art2.classList.add('bleed4me');
  }, 806);
  setTimeout(() => {
    art2.classList.remove('bleed4me');
  }, 950);
  setTimeout(() => {
    art2.classList.add('bleed4me');
  }, 990);
  setTimeout(() => {
    art2.classList.remove('bleed4me');
  }, 2030);
  setTimeout(() => {
    art2.classList.add('sonk');
  }, 15050);
  setTimeout(() => {
    art3.classList.add('blick');
  }, 17105);
  setTimeout(() => {
    art3.classList.remove('blick');
  }, 20302);
  setTimeout(() => {
    art4.classList.add('blick2');
  }, 17175);
  setTimeout(() => {
    art4.classList.remove('blick2');
  }, 18225);
  setTimeout(() => {
    art2.classList.remove('sonk');
  }, 17755);
  setTimeout(() => {
    art2.classList.add('orgfe');
  }, 17775);
  setTimeout(() => {
    arttext.classList.add('hertbrek');
  }, 17775);
  setTimeout(() => {
    arttext2.classList.add('anner');
  }, 17775);
  setTimeout(() => {
    art2.classList.remove('orgfe');
  }, 19805);
  setTimeout(() => {
    arttext.classList.remove('hertbrek');
  }, 19805);
  setTimeout(() => {
    arttext2.classList.remove('anner');
  }, 19805);
}

function stopface() {
  art3.classList.remove('intervention');
  art3.classList.remove('creep');
  art2.classList.remove('bleed4me');
  art2.classList.remove('bleed4me');
  art3.classList.remove('blick');
  art4.classList.remove('blick2');
  art2.classList.remove('sonk');
  art2.classList.remove('orgfe');
  arttext.classList.remove('hertbrek');
  arttext2.classList.remove('anner');
}

<div class="facecorn1">
  <h1></h1>
  <div id="facebutt1" class="facebutt1"></div>
  <button id="fbutn1" class='fbutn1' disabled="disabled" style="width: 85px;
                            height: 105px;
                            position: fixed;
                            bottom: 135px;
                            left: 615px;
                            opacity: 0%;" onmouseover="playface()" onmouseout="stopface()">
                </button>


</div>

What happens here which is a common setup I'm using. Mouse enters a button and plays something but leaving the button stops it all in a nice clunky way I like.

You'll notice the button is disabled. Clicking another button prior to landing on this page enables the button. But when I first open the website this and every other function like it acts like the button isn't disabled. IT WAS WORKING FINE FOR MONTHS.

I open the error terminal. There's Type Errors everywhere with my addevent listeners. Never had this issue but Fair. So, I did fix that BUT ITS STILL MESSING UP AND IGNORING THE DISABLED ATTRIBUTE, PROPERTY???

If anyone doubts my type error fix I simply changed it to:

*buttonid*.addEventListener('*mouseover/out*', (*eventname*);

since there's 2 functions, I tried using the same event name still bugging. Then I used a different name for each simply adding a or b at the end respectively and it still was not working.

I fixed all the type errors, but the problem persisted. I don't know if this is a bug. I just can't comprehend how it worked for months, I'm talking since i started working on this in 2021 and suddenly ploop sorry buddy all your code is stupid omg. I WAS USING TUTORIALS EVEN LIKE AGH!!!

Answer 1

Yes, mouseover and mouseout events still fire on disabled buttons. Click, mousedown, and mouseup do not.

document.querySelectorAll(".foo").forEach(button => {
  button.addEventListener("mouseover", function() {
    console.log(this.id, "mouseover");
  });
  button.addEventListener("mouseout", function() {
    console.log(this.id, "mouseout");
  });
  button.addEventListener("click", function() {
    console.log(this.id, "click");
  });
  button.addEventListener("mousedown", function() {
    console.log(this.id, "mousedown");
  });
  button.addEventListener("mouseup", function() {
    console.log(this.id, "mouseup");
  });
});

<button class="foo" id="disabled" disabled>
Disabled
</button>
<br>
<button class="foo" id="enabled">
Enabled
</button>

The specification explains what the disabled attribute does:

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

Informally, click events are those that occur when you press and release the mouse button. Mouse motion events are not click events.