Início / coding / Perguntas / 77786858
Accepted
pileup
Asked: 2024-01-09 20:43:24 +0800 CST

Detectar clique dentro de um elemento com delegação e quando o elemento for selecionado pelo nome de sua classe

  • 772

Como posso detectar se um clique está dentro de um elemento cujo ouvinte está selecionado por uma classe?

Por exemplo, tenho alguns elementos com nome de classe "my-class":

<div class="my-class">
    <button>Hello</button>
    <p>World</p>
</div>
<div class="my-class">
    <a href="">Click</a>
    <a href="">Here</a>
</div>

Se eu apenas ouvir a aula, não funcionará se o clique for feito nos elementos internos:

document.addEventListener("click", function(event) {
    if(event.target.classList.contains("my-class") {
        // 
    }
});

Como também posso detectar cliques em qualquer um dos elementos internos?

Encontrei a seguinte pergunta, mas funciona apenas para um único elemento que foi selecionado por um id e sem delegação: Detectar clique dentro/fora do elemento com manipulador de evento único

javascript

1 respostas

  1. Best Answer

    Use Element::closest()para verificar se o elemento clicado está dentro my-classou my-classem si mesmo:

    https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

    document.addEventListener("click", function(event) {
    if(event.target.closest(".my-class")) {
        console.log('my-class clicked!');
    }
    event.preventDefault();
});
    <div class="my-class">
    <button>Hello</button>
    <p>World</p>
</div>
<div class="my-class">
    <a href="">Click</a>
    <a href="">Here</a>
</div>

    • 2

relate perguntas