Получение позиции мыши в элементе холста, когда z-index = -1

Question

Это похоже на простую проблему. У меня есть приложение холста, которое я пишу с помощью Processing.js, и я хочу, чтобы оно появилось на фоне веб-страницы. Для этого у меня есть следующие CSS:

#canvas-back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
} 

Где нырок это идентификатор из DIV, который содержит фактический холст. Сам холст имеет ширину и высоту элемента тела html. Это корректно отображает меня (холст в фоновом режиме, под моим html-контентом), но я больше не могу захватить переменные mouseX и mouseY (то, что использует обработчик.js для получения координат мыши).

Как исправить эту проблему? Это вопрос другого css или есть другой способ получить координаты мыши в processing.js? Благодарю.

Answer 1

Понятно, что я разместил свое решение на случай, если у кого-то будет такая же проблема. Поскольку я использовал jquery, я пошел вперед и установил новые переменные jmouseX и jmouseY в положение мыши.

jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     jmouseX = e.pageX; 
     jmouseY = e.pageY; 
    }); 
}) 

Тогда, когда мне нужно mouseX или мышиный в моем processingjs приложение, которое я просто использовать jmouseX и jmouseY.

Answer 2

Ну, так как вы меняете индекс z на -1, а ваше тело имеет z-индекс auto, который вы можете представить как 0 в этом случае, вы не сможете регистрировать клики на вашем холсте, так как это под телом. Ваше тело получает все клики и так далее. В этом случае вам необходимо зарегистрировать события мыши на самом теле.

Если вам нужно получить клики на холсте, это единственное, что я могу предложить, это сделать его z-index = 1 и сделать его полностью прозрачным. Но в этом случае вы не сможете щелкнуть по элементам, находящимся в теле, например кнопкам, ссылкам и текстовым полям. В противном случае вам придется записывать события на теле и вручную отправлять координаты в библиотеку, которую вы используете.