web-dev-qa-db-fra.com

Existe-t-il un moyen de déclencher mousemove et d’obtenir event.pageX, event.pageY?

Ainsi, comme le précise la question, existe-t-il un moyen de déclencher un événement mousemove dans jQuery qui envoie également les coordonnées de la souris à l'événement Object?

Jusqu'à présent, mon code peut déclencher le déplacement de la souris à l'aide de la fonction .trigger (event), mais event.pageX et event.pageY ne sont pas définis.

javascriptjqueryjavascript-eventsmouseevent
24
Geo P

Je ne crois pas qu'il soit possible d'obtenir les coordonnées de la souris à la demande via JavaScript/jQuery; Toutefois, si vous liez la position à une variable globale, vous pouvez y accéder à tout moment dans le document, comme ceci:

$(document).ready(function(){
   $().mousemove(function(e){
      window.xPos = e.pageX;
      window.yPos = e.pageY;
   }); 
});

pour une option moins gourmande en ressources processeur, vous pouvez ajouter un délai, bien que vous négociez les performances contre un léger retard pour savoir où se trouve la souris:

function getMousePosition(timeoutMilliSeconds) {
    $(document).one("mousemove", function (event) {
        window.xPos = event.pageX;
        window.yPos = event.pageY;
        setTimeout("getMousePosition(" + timeoutMilliSeconds + ")", timeoutMilliSeconds);
    });
}
getMousePosition(100);

Vous devriez maintenant pouvoir accéder aux fichiers window.xPos et window.yPos de n’importe où dans le document en utilisant l’une ou l’autre des solutions sans avoir à déclencher un faux événement.

3
dSquared

Vous devez définir pageX et pageY directement avant de déclencher l'événement. Pour définir ces propriétés, créez un objet jQuery.Event.

// create a jQuery event
e = $.Event('mousemove');

// set coordinates
e.pageX = 100;
e.pageY = 100;

// trigger event - must trigger on document
$(document).trigger(e);

Voir dans jsFiddle .

37
tenedor

Je ne suis pas sûr de bien comprendre la question. Tu peux faire:

$('.someClass').mousemove(function(event){
    console.log(event.pageX);
    console.log(event.pageY);
});

Maintenant, chaque fois que la souris se déplace sur someClass, elle enregistrera les coordonnées xy. Voici le jsfiddle pour le voir en action et le jquery documentation .

0
Ryre

Vous ne pouvez pas déplacer une souris si c'est ce que vous demandez. Mais vous pouvez appeler une fonction avec le contexte et les arguments de votre choix. Par exemple.:

function foobar(e)
{
  this.className = 'whatever'; // this == element
}

someElement.onmousemove = foobar;

var obj = {whatever:'you want'};
foobar.call(someElement, obj); // calls foobar(obj) in context of someElement
0
Nux

Pense que je connais ton problème. Vous essayez d'interroger la position de la souris par programme. Vous avez peut-être un code qui ressemble à ceci

$(document).one('mousemove.myModule', function (e) {
    // e.pageY and e.pageX is undefined.
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX); }
        ).trigger('mousemove.myModule');

Alors vous avez absolument raison. Les propriétés pageY et pageX de l'objet événement ne seront pas définies. En fait, il y a un tas de choses dans l'objet event qui ne seront pas là, pas seulement .pageY et .pageX. Peut-être un bug dans jQuery. Quoi qu'il en soit, ne chaînez pas cet appel pour déclencher et déclencher l'événement sur $ (fenêtre) à la place. Ne me demandez pas pourquoi cela fonctionne bien, mais pour moi cela a été le cas:

$(document).one('mousemove.myModule', function (e) {
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX); } );

// Now e.pageY and e.pageX will be defined!
$(window).trigger('mousemove.myModule');
0
Martin Andersson

C’est le meilleur choix que je puisse faire, cela ne vous empêche pas de définir des variables globales. L'événement clic capturera toujours les coordonnées afin que vous puissiez le transmettre à votre souris.

$(element).click(function(e){
  $(element).trigger('mousemove',e);
});

Ensuite, cet objet événement sera le deuxième argument de votre fonction mousemove; le premier étant l'événement mousemove ou l'événement créé par jQuery.

$(element).mousemove(function(e,clickEvent){
  if typeof e.pageX === 'undefined' e = clickEvent;
  // or if you prefer, clickEvent.pageX;
});
0
Gary