Как повесить двойное действие на один Div?

Question

[ParaBellum577]

Всем привет. Есть список такого вида:
По клику на всю линию открывается модальное окно, а по клику на три точки нужно открывать другой поп-ап. Но из-за того, что точки находятся в диве, на котором уже висит обработчик, открывается два окна сразу. Подскажите плиз как пофиксить?

<div
              onClick={() => this.handleOpenModal(project)}
              key={`${project.ProjectID} ${project.TrackerID}`}
              className="focus-projects"
            >
              <div className="unc-focus-line">
                <div className="unc-focus-item">
                  <img src={project.iconSrc} alt="icon" />
                  <div>
                    <p title={project.Name}>{project.Name}</p>
                    <span>{project.Description ? project.Description : ''}</span>
                  </div>
                </div>
                <div className="unc-focus-settings">
                  <CopyProjectSettings
                    placement="left"
                    dots="horizontal"
                    isModalOpen={false}
                    projectData={project}
                  />
                </div>
              </div>
            </div>

Answer 1

[Александр Епихин]

При клике на три точки нужно запретить всплытие события

Comments

[ParaBellum577]

Блин, точно, такая простая вещь, а из головы выветрилась, спасибо

Answer 2

[Алексей]

Можно сделать контейнер в который поместить всю линию и кнопку три точки и тогда можно будет кликать на разные области без всякой дикой логики.

Comments

[ParaBellum577]

Тогда хавер стейты будут не такие как мне нужны