-2

Boa tarde, eu tenho um projeto desta forma:

<div data-id="codexample" class="abc">
   <div class="container">
      <div class="btn">
         <p>Teste</p>
      </div>
   </div>
</div>

Eu queria que a div container fosse clicável e os seus filhos também, mas eu queria também que independentemente de onde tivesse sido clicado eu conseguisse retornar o data-id da div .abc Mas ao usar o chieldNode como a referencia de click muda, eu nem sempre consigo retornar o data-id. Como eu faço para resolver este problema?

Exemplo do código que está realmente no projeto:

const adis = document.getElementsByClassName("adi");

for (var i = 0; i < adis.length; i++) {
    adis[i].addEventListener("click", function(target){
        var idProduct;
        idProduct = target.target.parentNode.getAttribute("data-prodId");
        const questdel = confirm('Pretende realmente remover o produto ' + prodName + ' do carrinho?');
        if(questdel){
            delete cart[idProduct]; 
            localStorage.setItem("cart", JSON.stringify(cart));
        }
    });
};

Dentro do .adi eu tenho outros sub componentes, mas o .adi é o principal de topo clicavel, e os outros herdam essa propriedade normalmente, mas retorna o .prod-id mal, dependendo do sitio do click.

A pedido dos comentários aqui esta o codigo html (com variáveis JS):

<div class="cartBox">
    <table id="cartTable">
        <tr>
            <td><p>Imagem</p></td>
            <td><p>Produto</p></td>
            <td><p>Quantidade</p></td>
            <td><p>Sub-Preço</p></td>
            <td><p>Ação</p></td>
        </tr>
        <tr data-prodId="' + key + '">
            <td><img src="' + data['imagePath'] + '" title="' + data['nome'] + '"></td>
            <td><p class="nameProd">' + data['nome'] + '</p></td>
            <td><input type="number" min="1" max="15" class="nqtd qtdpc" placeholder="QTD" value="' + cart[key].inCart + '" required autocomplete="off" required autocapitalize="off" /></td>
            <td><p>' + subtotal + '€</p></td>
            <td><div class="actionDelete adi"><p><i class="fas fa-trash"></i></p></div></td>
        </tr>
        <tr>
            <td class="totalText" colspan="4"><p>Total:</p></td>
            <td><p class="totalPc"></p></td>
        </tr>
    </table>
</div>
10
  • Coloque a estrutura do HTML mais completa, onde está os elementos .adi e .prod-id?
    – Costamilam
    Commented 30/08/2020 às 17:17
  • Ja adicionei o HTML
    – tomas
    Commented 30/08/2020 às 17:22
  • 1
    Isto responde à sua pergunta? Retornar ID da tag pai ao clicar em um botão. Há outras perguntas semelhantes que também podem ajudar, pequise pela comunidade por parentElement
    – Costamilam
    Commented 30/08/2020 às 17:38
  • O problema é que a referencia de click nessa pergunta não muda, na minha muda.
    – tomas
    Commented 30/08/2020 às 17:41
  • 1
    Não faz muita diferença, pega o pai, se não for o que deseja, pega o pai dele, e assim por diante, a lógica é a mesma. Algo como, while (!el.hasAttr("data-prodId")) el = el.parentElement;. Esse é só um código demonstrativo, não irá funcionar
    – Costamilam
    Commented 30/08/2020 às 17:45

1 Resposta 1

1

Olá, tudo bem?

O este problema ocorre por que você está utilizando a propriedade target do objeto evento. Essa propriedade refere-se ao elemento que originou o evento, então nem sempre o que você deseja. Abaixo a citação da documentação do MDN sobre o event.target

Uma referência ao objeto que enviou o evento. É diferente de event.currentTarget quando o manipulador de eventos é chamado durante a fase de borbulhagem ou captura do evento.

Para funcionar da forma que deseja, você deveria usar a propriedade currentTarget, que retornará o elemento responsável pelo evento (no seu caso, a div .abc)

const adis = document.getElementsByClassName("adi");

for (var i = 0; i < adis.length; i++) {
    adis[i].addEventListener("click", function(target){
        var idProduct;
        idProduct = target.currentTarget.parentNode.getAttribute("data-prodId");
        const questdel = confirm('Pretende realmente remover o produto ' + prodName + ' do carrinho?');
        if(questdel){
            delete cart[idProduct]; 
            localStorage.setItem("cart", JSON.stringify(cart));
        }
    });
};

Outra solução mais elegante seria utilizar o this, que nesse caso também refere-se ao elemento que você definiu o evento

const adis = document.getElementsByClassName("adi");

for (var i = 0; i < adis.length; i++) {
    adis[i].addEventListener("click", function(){
        var idProduct;
        idProduct = this.parentNode.getAttribute("data-prodId");
        const questdel = confirm('Pretende realmente remover o produto ' + prodName + ' do carrinho?');
        if(questdel){
            delete cart[idProduct]; 
            localStorage.setItem("cart", JSON.stringify(cart));
        }
    });
};

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .