简体   繁体   English

如何阻止孩子触发父鼠标输入事件

[英]How to stop children from triggering parent mouseenter event

My buttons have one image inside them, and the mouseenter event gets triggered by both the button AND the image.我的按钮内部有一个图像,并且 mouseenter 事件由按钮和图像触发。 I would like the event to be triggered only once by "hovering" the BUTTON, not the image.我希望事件只通过“悬停”按钮而不是图像来触发一次。

HTML, the only relevant part of the code are the buttons and their IDs. 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 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);
}

When I add the mouseenter event like this, the SelectSfx();当我像这样添加 mouseenter 事件时,SelectSfx(); does NOT play when I hover the images within the buttons.当我 hover 按钮内的图像时不播放。 The sound plays only once, which is the desired result.声音只播放一次,这是期望的结果。 But unfortunately I am unable to disable the event once the button gets disabled.但不幸的是,一旦按钮被禁用,我就无法禁用该事件。

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

Add the following code just below your "setTimeout" line in your javascript file:在 javascript 文件中的“setTimeout”行下方添加以下代码:

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

The code removes pointer events from images that are within the desired buttons.该代码从所需按钮内的图像中删除指针事件。

Edit:编辑:

Perhaps, the "more correct" answer is to remove the third argument of the 'addEventListener' function call:也许,“更正确”的答案是删除“addEventListener”function 调用的第三个参数:

ORIGINAL:原来的:

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

FIXED:固定的:

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

When useCapture is set to true, the event listener is triggered during the capturing phase of the event propagation process.当 useCapture 设置为 true 时,事件监听器在事件传播过程的捕获阶段被触发。 This means that the event is first captured by the outermost element and then propagated to the inner elements.这意味着事件首先被最外层元素捕获,然后传播到内部元素。

When useCapture is set to false or not specified, the event listener is triggered during the bubbling phase of the event propagation process.当useCapture设置为false或未指定时,事件监听器在事件传播过程的冒泡阶段被触发。 This means that the event is first captured by the innermost element and then propagated to the outer elements.这意味着事件首先被最内层的元素捕获,然后传播到最外层的元素。

You can ignore pointer events on the image using CSS and that way the pointer will only interact with the button.您可以使用 CSS 忽略图像上的指针事件,这样指针将只与按钮交互。

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

Just use the Element: mouseover event with CSS pointer-events: none .只需将Element: mouseover 事件与 CSS pointer-events: none一起使用。

The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.当使用定点设备(例如鼠标或触控板)将 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM