Блог

среда
разработки
react.js машинописный
текст next.js

Я не хочу запускать процесс onClick при нажатии тега span.
Как я должен это реализовать?

  return (
    <div className="padding-16 flex gap-5 flex-container" onClick={onClickUser}>
        <img src={img} />
      <div className="flex flex-direction gridgap-5">
        <p>
          {name}
        </p>
        <p>
          {age}
        </p>
      </div>
      <span className="hover" onClick={isShowCard}>
        <img src="img/dot.svg" />
      </span>
    </div>
)
  

Вы можете использовать stopPropagation() для span события щелчка.

  isShowCard = (event) => {
     event.stopPropagation()
     ...
 }
 return (
    <div className="padding-16 flex gap-5 flex-container" onClick={onClickUser}>
        <img src={img} />
      <div className="flex flex-direction gridgap-5">
        <p>
          {name}
        </p>
        <p>
          {age}
        </p>
      </div>
      <span className="hover" onClick={isShowCard}>
        <img src="img/dot.svg" />
      </span>
    </div>
)
  

onClickUser Перед продолжением проверьте, есть ли у него предок с именем класса hover . Например, изменить:

 const onClickUser = (e) => {
  // code
};
  

Для

 const onClickUser = (e) => {
  if (e.target.closest('.hover')) {
    // do nothing
    return;
  }
  // code
};