低評価くらったのでちょっと解説するわ

まず、以前の状態というのはどこかで持たなければならない。
DOMから今の状態を取得というのもあるけど、それはかなり面倒。
なので、2次元の配列(JavaScriptではジャグ配列だが)を用意して、
そこに情報を持たせる。

次に、どのイベントを取得するのかと言うこと。
mousemoveではそのマスで動いただけで取得されちゃう。
つまり、mousemoveでそのマスの色が変わるとするとすごい
点滅を繰り返すことになる。
そこで使うのはmouseenter。
これなら、そのマスに入ったときしかイベントが発生しないので、
色の入れ替えは1回だけしか起きない。
あとは、今マウスが押されているのがわかれば良い。

あと、単純なクリックについては、単純にmousedownを見れば良い。

これらを踏まえて、ごちょごちょするとできあがる。
なお、hyperappを使っているのは俺の完全な趣味。
reactでもvueでも好きな物を使えば良い。
バニラやjQueryは面倒なだけなのでお勧めはしない。