如何阻止孩子觸發父鼠標輸入事件

Question

我的按鈕內部有一個圖像，並且 mouseenter 事件由按鈕和圖像觸發。 我希望事件只通過“懸停”按鈕而不是圖像來觸發一次。

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);
}

當我像這樣添加 mouseenter 事件時，SelectSfx(); 當我 hover 按鈕內的圖像時不播放。 聲音只播放一次，這是期望的結果。 但不幸的是，一旦按鈕被禁用，我就無法禁用該事件。

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);
}

Answer 1

在 javascript 文件中的“setTimeout”行下方添加以下代碼：

document
  .getElementById(`btn-${idNumber}`)
  .querySelectorAll('img')
  .forEach((img) => {
    img.style.pointerEvents = 'none';
  });

該代碼從所需按鈕內的圖像中刪除指針事件。

編輯：

也許，“更正確”的答案是刪除“addEventListener”function 調用的第三個參數：

原來的：

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

固定的：

document
  .getElementById(`btn-${idNumber}`)
  .addEventListener('mouseenter', selectSfx);

當 useCapture 設置為 true 時，事件監聽器在事件傳播過程的捕獲階段被觸發。 這意味着事件首先被最外層元素捕獲，然后傳播到內部元素。

當useCapture設置為false或未指定時，事件監聽器在事件傳播過程的冒泡階段被觸發。 這意味着事件首先被最內層的元素捕獲，然后傳播到最外層的元素。

Answer 2

您可以使用 CSS 忽略圖像上的指針事件，這樣指針將只與按鈕交互。

<style>
.button img {
  pointer-events: none;
}
</style>

Answer 3

只需將Element: mouseover 事件與 CSS pointer-events: none一起使用。

當使用定點設備（例如鼠標或觸控板）將 cursor 移動到元素或其子元素之一時，將在元素上觸發鼠標懸停事件。

 let button = document.querySelector("button"); document.querySelector("button > img").style.pointerEvents = 'none'; button.addEventListener("mouseover", function (e) { console.log(e.target.tagName); }, false);

 <div id="product-1" class="product estusFlask"> <button id="btn-1" class="button"> 1000 <img src="https://www.aexp-static.com/cdaas/one/statics/axp-static-assets/1.8.0/package/dist/img/logos/dls-logo-bluebox-solid.svg" /> </button> </div>