9
respostas

onClick

Quando uso este evento ele não me retorna o real alvo do evento, e sim o próximo elemento com posição equivalente a este. Alguém saberia me dizer o que está acontecendo ?

9 respostas

Fala Emily, tudo bem?

Então, a propriedade target do evento, serve para isso, que retorna o elemento que chamou o evento.

Talvez esse seu problema esteja ocorrento por causa do efeito bubbling (veja sobre isso aqui: https://medium.com/totvsdevelopers/event-bubbling-no-javascript-9d6a8da32854#:~:text=O%20princ%C3%ADpio%20do%20efeito%20bubbling%20no%20JavaScript%20%C3%A9%20exatamente%20o%20mesmo.&text=O%20efeito%20de%20%E2%80%9Cborbulhamento%E2%80%9D%20se,e%20depois%20o%20elemento%20pai.)

É possível resolver isso com usando o metodo stopPropagation no evento. Ex: event.stopPropagation()

Continua dando o mesmo erro aqui :(

Consegue me dar um exemplo do que está ocorrendo?

runningTheGame(event){
        event.stopPropagation()
        console.log(event.target)

        if(this.index<8){
                this.numQuestion = parseInt(Math.random() * 9);

                let newText = this.questions[this.numQuestion].text;
                let newAnswers = this.questions[this.numQuestion].answers;
                const newState = {
                    text: newText,
                    answer: newAnswers
                }
                this.setState(newState);

                this.index++               

        }



    }
render(){
        return(
            <>
                <p>{this.questions[this.numQuestion].text}</p>
                <div onClick = {this.runningTheGame.bind(this)}>
                    <button>{this.questions[this.numQuestion].answers[0].a}</button>
                    <button>{this.questions[this.numQuestion].answers[1].b}</button>
                    <button>{this.questions[this.numQuestion].answers[2].c}</button>
                    <button>{this.questions[this.numQuestion].answers[3].d}</button>
                </div>
            </>
        )
    };

Esse é o meu código. Estou tentando pegar o alvo do evento de click, só que isso não está acontecendo, já que ele me devolve o próximo elemento com posição equivalente ao real alvo.

Emilly, pelo que estou vendo, o certo seria que você colocasse o evento de onClick nos buttons, não na div

Fiz o que você falou e continua dando o mesmo erro... : (

Você removeu o onClick da div?

Sim, coloquei eles nos botões como você disse !

Poderia por favor, nos mandar o código completo pelo github?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software