我的按钮里面有一个图像，鼠标进入事件被按钮和图像触发。我希望事件只被“悬停”按钮触发一次，而不是图像。
HTML，代码中唯一相关的部分是按钮和它们的ID。

<div class="catalogue-hidden">
        <div id="product-1" class="product estusFlask">
          <img src="./products/Item_Estus_Flask.png" />
          <span>Estus Flask</span>
          <button id="btn-1" class="button">
            1000
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-2" class="product">
          <img src="./products/Mask_of_the_Father.png" />
          <span>Mask of the Father</span>
          <button id="btn-2" class="button">
            8000
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-3" class="product">
          <img src="./products/Giant_Armor.png" />
          <span>Giant Armor</span>
          <button id="btn-3" class="button">
            5000
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-4" class="product">
          <img src="./products/Giant_Gauntlets.png" />
          <span>Giant Gauntlets</span>
          <button id="btn-4" class="button">
            5000
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-5" class="product">
          <img src="./products/Giant_Leggings.png" />
          <span>Giant Leggings</span>
          <button id="btn-5" class="button">
            5000
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-6" class="product">
          <img src="./products/Wpn_Zweihander.png" />
          <span>Zweihander</span>
          <button id="btn-6" class="button">
            3500
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-7" class="product">
          <img src="./products/Grass_crest_shield.png" />
          <span>Grass Crest Shield</span>
          <button id="btn-7" class="button">
            1500
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-8" class="product">
          <img src="./products/Havel's_Ring.png" />
          <span>Havel's Ring</span>
          <button id="btn-8" class="button">
            2000
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-9" class="product">
          <img src="./products/Ring_of_Favor_and_Protection.png" />
          <span class="fap">Ring of Favor and Protection</span>
          <button id="btn-9" class="button">
            2000
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-10" class="product">
          <img src="./products/Pyro_Pyromancy_Flame.png" />
          <span>Pyromancy Flame</span>
          <button id="btn-10" class="button">
            1000
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div id="product-11" class="product">
          <img src="./products/Black_Flame.png" />
          <span>Black Flame</span>
          <button id="btn-11" class="button">
            5000
            <img src="./icons/soul_of_a_proud_paladin.png" />
          </button>
        </div>

        <div onclick="stopBgm(); changeVideo(); hideHud()" id="product-12" class="product-hidden">
          <img src="./products/7011.png" />
          <span>Well, what is it?</span>
          <button id="btn-12" class="button-hidden">
            PWN SOME NOOBZ
          </div>

JavaScript语言

function selectSfx() {
  var audio = document.querySelector(".selectSfx");
  audio.currentTime = 0;
  audio.play();
}

for (let idNumber = 1; idNumber < 13; idNumber++) {
  setTimeout(() => {
    document
      .getElementById(`btn-${idNumber}`)
      .addEventListener("mouseenter", selectSfx, true);

    document
      .getElementById(`btn-${idNumber}`)
      .addEventListener("click", (e) => {
        condition++;
        console.log(condition);
        okSfx();

        document.getElementById(`product-${idNumber}`).className =
          "product-fake";

        document.getElementById(`btn-${idNumber}`).disabled = true;

        document
          .getElementById(`btn-${idNumber}`)
          .removeEventListener("mouseenter", selectSfx, true);

        if (condition >= 11) {
          document.querySelector(".product-hidden").className = "product";
          document.getElementById("btn-12").className = "button";
        }
      });
  }, 4000);
}

当我像这样添加鼠标进入事件时，SelectSfx（）;当我在按钮内悬停图像时不会播放。声音只播放一次，这是想要的结果。但不幸的是，一旦按钮被禁用，我就无法禁用事件。

function selectSfx() {
  var audio = document.querySelector(".selectSfx");
  audio.currentTime = 0;
  audio.play();
}

for (let idNumber = 1; idNumber < 14; idNumber++) {
  setTimeout(() => {
    document
      .getElementById(`btn-${idNumber}`)
      .addEventListener("mouseenter", (e) => {
        selectSfx();
      });
  }, 4000);
}