Search code examples
javascripthtmlcssgridcell

JS: Is there a way to make a cell in a grid not clickable?

So I'm basically making a grid where a single click is a circle and a double click is a square. However, if I go back to an already clicked box and make a single or double click, it changes the shape in it. Is there a way to make an already clicked box not clickable anymore?

Here is my current code

Solution

  • This should work

    https://codesandbox.io/s/vn96m0o6l

    Problem is that double click is still click. So it first triggers click handler than double click. That is why i set timeout of 200ms on click handler.

    Double click handler also passes isDoubleClick flag so that handler knows what to do. And in handler based on that and class not existing yet decides which action to do. When click handler gets activated, element already has class and just ignores it.

    Could be better, but will fix problem