Obtenir la position de la souris dans un élément de toile lorsque z-index = -1

Question

cela semble être un problème simple. J'ai une application toile que je suis en train d'écrire à l'aide Processing.js et je veux qu'il apparaisse dans l'arrière-plan d'une page Web. Pour ce faire je le CSS suivant:

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

Où toile retour est l'id d'un div qui contient la toile réelle. La toile elle-même est réglée pour avoir la largeur et la hauteur de l'élément de corps HTML. Cela rend correctement pour moi (la toile en arrière-plan, sous mon contenu html) mais je ne peut plus saisir les variables mouseX et mouseY (ce Processing.js utilise pour obtenir les coordonnées de la souris).

Comment puis-je résoudre ce problème? Est-ce une question de différent ou est-il css une autre façon d'obtenir les coordonnées de la souris dans Processing.js? Merci.

Answer 1

Figured je poste ma solution au cas où quelqu'un a le même problème. Depuis que j'utilisais jquery je suis allé de l'avant et ensemble de nouvelles variables, jmouseX et jmouseY, à la position de la souris.

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

Alors chaque fois que je besoin mouseX ou mouseY dans mes processing.js app je viens d'utiliser jmouseX et jmouseY.

Answer 2

Eh bien, puisque vous changer le z-index à -1 et votre corps a auto z-index, que vous pouvez penser à 0 dans ce cas, vous ne serez pas en mesure d'enregistrer des clics sur votre toile, car il est sous le corps. Votre corps reçoit tous les clics et ainsi de suite. Vous devez vous enregistrer vos événements de souris sur le corps lui-même dans ce cas.

Si vous devez obtenir des clics sur la toile, cette seule chose que je peux suggérer, est de rendre z-index = 1 et le rendre totalement transparent. Mais dans ce cas, vous ne serez pas en mesure de cliquer sur tous les éléments qui sont dans le corps, comme des boutons, des liens et des zones de texte. Sinon, vous aurez à des événements de capture sur le corps et soumettez manuellement les coordinats dans la bibliothèque que vous utilisez.