Получение положения мыши в элементе холста, когда z-index = -1
-
09-10-2019 - |
Вопрос
Это похоже на простую проблему. У меня есть приложение Canvas, которое я пишу, используя Phanging.js, и я хочу, чтобы он появился на фоне веб-страницы. Для достижения этого у меня есть следующие CSS:
#canvas-back {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
Где холст обратно - это идентификатор дивата, который содержит фактический холст. Сам холст установлен на ширину и высоту элемента HTML Code. Это делает правильно для меня (холст на заднем плане, под моим HTML-контентом), но я больше не могу захватить переменные мыши и мышью (какую обработку использует для получения координат мыши).
Как я могу решить эту проблему? Это вопрос разных CSS или есть еще один способ получить координаты мыши в Rebable.js? Спасибо.
Решение
Обработал, я бы опубликовал свое решение на случай, если у кого-то есть та же проблема. Поскольку я использовал jQuery, я пошел вперед и установил новые переменные, jmousex и jmousey, в положение мыши.
jQuery(document).ready(function(){
$(document).mousemove(function(e){
jmouseX = e.pageX;
jmouseY = e.pageY;
});
})
Затем, когда мне нужно Mousex или Tourey в моем приложении Mousexjs, я просто использую jmousex и jmousey.
Другие советы
Ну, поскольку вы изменяете Z-индекс до -1, и ваше тело имеет Z-индекс AUTO, что вы можете подумать как 0 в этом случае, вы не сможете зарегистрировать все щелчки на вашем холсте, поскольку он находится под телом Отказ Ваше тело получает все клики и так далее. Вы должны зарегистрировать события мыши на самом телу в этом случае.
Если вам нужно щелчкаться на холсте, это единственное, что я могу предложить, это сделать его z-index = 1 и сделать его полностью прозрачным. Но в этом случае вы не сможете нажать на какие-либо элементы, которые находятся в теле, например, кнопки, ссылки и текстовые коробки. В противном случае вам придется захватывать события на теле и вручную отправить координаты в библиотеку, которую вы используете.