如何使用Z索引较低的HTML元素接收鼠标事件？

Question

I'm coding a checker game in JavaScript/JQuery. I have the following issue: I display the yellow arrows using a canvas that covers the entire screen and has z-index: 1. The checkers are z-index: 0.

I would like to add the possibility to drag and drop checkers. I want to use the JQuery's draggable widget to make every checker draggable. However, since the canvas has a higher z-index than the checkers, the latter won't receive the mouse events.

How can I have the checkers received the mouse events despite having a lower z-index?

Answer 1

if you don't need mouseevents for your canvas, give pointer-events:none; a try. ( Relevant SO Question )