[FIXED] How to prevent a click on the underlying element?

Issue

How to prevent a click on the underlying element? When I hover the mouse over the board on the website https://08ce2429.my-trello-frontend.pages.dev/ - the label "Delete board" appears, when I click on it, the board is deleted, but the board page also opens. How to prevent this?

My code of the board element:

  return (
    <div key={props.id} className={`board-home id${props.id}`}>
      <Link
        className="board-link"
        to={{ pathname: '/board/' + props.id }}
        state={{ id: props.id }}
      >
        <div className="board-fade">
          <h2 className="board-title">{props.title}</h2>
          <div
            className="delete-board"
            id={String(props.id)}
            onClick={(e) => {
              try {
                e.stopPropagation()
                alert('stopPropagation')
              } catch (err) {
                alert(err)
              }
              //  (document.querySelector(`.id${props.id}`) as HTMLElement).style.pointerEvents = "none"
              deleteBoard((e.target as HTMLElement).getAttribute('id')!)
            }}
          >
            Delete board
          </div>
        </div>
      </Link>
      <Routes>
        <Route path="/board/:id" element={<Board />} />
      </Routes>
    </div>
  )

stopPropagation() does not help.

Solution

Just use e.preventDefault() in onClick

Answered By - kpripper
Answer Checked By - - Katrina (ReactFix Volunteer)