CODEWITHSUNDEEP
javascriptjquerycss
Franck Dernoncourt
Franck Dernoncourt

Reputation: 83297

How can I have mouse events received by an HTML element with lower z-index?

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?

enter image description here

Upvotes: 0

Views: 589

Answers (1)

darthmaim
darthmaim

Reputation: 5148

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

Upvotes: 3

Related Questions