Vyhledávání na webu

javascript - Můžete cílit na rodičovský prvek elementu pomocí event.target?

Snažím se změnit innerHTML mé stránky tak, aby se stalo innerHTML prvku, na který kliknu. Jediný problém je, že ho chci vzít celý prvek, například:

    <section 
      class="homeItem"> 
      <div>
        <!-- more HTML here -->
      </div>
    </section>

Zatímco kód, který jsem napsal v JavaScriptu:

function selectedProduct(event){
  target = event.target;
  element = document.getElementById("test");
  element.innerHTML = target.innerHTML;
}

bude cílit na konkrétní prvek, na který kliknu.

Co bych chtěl dosáhnout je, že když kliknu kdekoli na element <section>, vezme se innerHTML celého elementu <section>, spíše než konkrétního, na který jsem klikl.

Předpokládal bych, že to má něco společného s výběrem rodičovského prvku toho, na který je kliknuto, ale nejsem si jistý a nemohu nic najít online.

Pokud je to možné, rád bych se vyhnul JQuery.

Odpověď č. 1

Myslím, že to, co potřebujete, je použít event.currentTarget. To bude obsahovat prvek, který skutečně má posluchače události. Takže pokud celý <section> má posluchače události, event.target bude kliknutý prvek, <section> bude v event.currentTarget.

Jinak by parentNode mohl být to, co hledáte.

odkaz na currentTarget
odkaz na parentNode

Odpověď č. 2

Chcete-li použít rodiče prvku, použijte parentElement:

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}

Odpověď č. 3

handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}

Odpověď č. 4

function getParent(event)
{
   return event.target.parentNode;
}

Příklady: 1. document.body.addEventListener("click", getParent, false); vrátí rodičovský element aktuálního elementu, na který jste kliknuli.

  1. Pokud chcete použít uvnitř nějaké funkce, pak předávejte vaši událost a zavolejte funkci takto: function yourFunction(event){ var parentElement=getParent(event); }

Související články