Comment faire pour qu'un bouton dans un DIV n'appelle pas l'événement click de la <div>.

Question

J'ai un objet qui a son propre événement onClick(). Je veux que l'utilisateur puisse cliquer n'importe où dans le div pour effectuer une action (retourner la carte). Cependant, il y a également un bouton dans ce DIV. Pour le bouton, je ne veux pas qu'il appelle l'événement onClick() de la division (donc qu'il ne retourne pas la carte).

<div onClick={this.handleClick}>
    <button onClick={this.buttonClickEvent}>menu</button>
</div>

Une idée sur la manière de procéder ?

Answer 1

Vous pouvez utiliser stopPropagation() méthode. Elle empêche la propagation ultérieure de l'événement en cours dans les phases de capture et de bullage. Ainsi, votre buttonClickEvent ressemblera à ceci :

  buttonClickEvent = (e) => {
    // do smth here
    e.stopPropagation();
  }

Answer 2

Essayez d'utiliser stopPropagation() avec des identifiants

const div = document.querySelector('#div');
const btn = document.querySelector('#btn');

div.addEventListener('click', (e) => {
  // do something here
  e.stopPropagation();
  console.log('div');
});

btn.addEventListener('click', (e) => {
  // do something here
  e.stopPropagation();
  console.log('button');
});

#div {
  background-color: red;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
}

<div id="div">
  div
  <button id="btn">menu</button> div
</div>