Как вызвать функцию только в родительском div, а не в child

Question

<button onClick={onClickParent}>
<div className={"iconDiv"}>
<div className={"iconNameDiv"}> 
</button> 

У меня есть что-то вроде этой структуры. Когда я нажимаю кнопку, она меняет цвет кнопки. Однако, когда я щелкаю внутри div, эта функция не работает. Как предотвратить onclick внутри div? единственный родитель

Answer 1

Как правило, все, что находится внутри тега кнопки, должно использоваться для нажатия кнопки, поэтому я бы go для тега div, который можно использовать для выравнивания дочерних элементов. Ниже приведен код для предотвращения кликов, инициирующих дочерние элементы, просто проверьте класс и убедитесь, что он совпадает с классом родительского элемента div.

function test(event) {
  if(event.target.className === 'test') {
    console.log('execute click code');
  }
}

.test {
  padding: 50px;
}

<div onClick="test(event)" class="test">
  <div className="test1"> asdfasdf</div>
  <div className="test2"> asdfasdf</div>
</div>