Remove event listener added by click event, not in useEffect

Question

I have an table rendered by an component.

On each td, i have function onClick

<table>
  <tbody>
    <tr>
      <td onClick={handleClick}>a</td>
      <td onClick={handleClick}>a</td>
      <td onClick={handleClick}>a</td>
    </tr>
  </tbody>
</table>

On handleClick function, i add 3 more event listener: movedown, mousemove, mouseup to track the mouse for selecting

handleClick = (event) => {
  const mousedown = (e) => {...}
  event.target.addEventListener("mousedown", mousedown)
  const mousemove = (e) => {...}
  const mouseup = (e) => {
    document.getElementById("tbl").removeEventListener("mousemove", mousemove);
  }
  document.getElementById("tbl").addEventListener("mousemove", mousemove);
  document.getElementById("tbl").addEventListener("mouseup", mouseup);
}

The problem is: i can not remove mouseup event after each click, so there are many duplicates of mouseup event like this:

I try to use the similar as useEffect at the end of handleClick:

return () => document.getElementById("tbl").removeEventListener("mouseup", mouseup);

but it seems not working

Can you help me to solve this? Many thanks

Answer 1

Try to use onmouseout to remove your event. useEffect return func only run when your tbl unmount:D