JS：有没有办法使网格中的单元格不可点击？

Question

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

Answer 1

我相信将CSS属性'pointer-events'设置为'none'应该可行。

pointer-events: none;

Answer 2

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

Answer 3

Just add A variable after click and use this

if (isClicked = 1){ 
$(this).unbind("click");
}  

or use vanilla js like this

document.getElementById("myElement").onclick = function() { return false; }