web-dev-qa-db-fra.com

Déclencher un événement mousemove à l'aide de Jquery ou Javascript

Salut, je sais que nous pouvons déclencher un événement clic. mais je veux savoir que nous pouvons déclencher un événement mousemove sans aucun mouvement réel de la souris par l'utilisateur.

La description :

Je veux montrer un message quand l'utilisateur sélectionne quelque chose. sur toile, ma toile est de pleine hauteur et largeur, lorsque l'utilisateur clique sur un bouton de la toile apparaît. lorsque l'utilisateur fait un mouvement de souris, il voit le message "Cliquez et faites glisser une partie de la page Web". Ce message suit le mouvement de la souris de l'utilisateur.

Ce que je veux faire :

Lorsque l'utilisateur clique sur le bouton, il devrait voir le message "Cliquez et faites glisser une partie de la page Web". et le message doit suivre chaque fois que l'utilisateur déplace la souris.

Problème:

L'utilisateur n'est pas en mesure de voir le message après avoir cliqué jusqu'à ce qu'il/elle déplace sa souris.

Code:

      function activateCanvas() {
           var documentWidth = jQ(document).width(),
           documentHeight = jQ(document).height();

                 jQ('body').prepend('<canvas id="uxa-canvas-container" width="' + documentWidth + '" height="' + documentHeight + '" ></canvas><form method="post" id="uxa-annotations-container"></form>');

    canvas = new UXAFeedback.Canvas('uxa-canvas-container', {
        containerClass: 'uxa-canvas-container',
        selection: false,
        defaultCursor: 'crosshair'
    });


  jQ(function() {
        var canvas = jQ('.upper-canvas').get(0);
        var ctx = canvas.getContext('2d');
        var x,y;

        var tooltipDraw = function(e) {

            ctx.save();
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.restore();

            x = e.pageX - canvas.offsetLeft;
            y = e.pageY - canvas.offsetTop;
            var str = 'Click and drag on any part of the webpage.';

            ctx.fillStyle = '#ddd';
            ctx.fillRect(x + 10, y - 60, 500, 40);
            ctx.fillStyle = 'rgb(12, 106, 185)';
            ctx.font = 'bold 24px verdana';
            ctx.fillText(str, x + 20, y - 30, 480);

        };

        canvas.addEventListener('onfocus',tooltipDraw,0);
        canvas.addEventListener('mousemove',tooltipDraw,0);

        canvas.addEventListener('mousedown', function() {
            canvas.removeEventListener('mousemove', tooltipDraw, false);
            ctx.save();
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.restore();
        }, false);



       });
  }

        jQ('body').on('click', '.mood_img_div', function() {
    // alert("soemthing");
      toggleOverlay();
       activateCanvas();
       });

J'ai créé une fonction qui est appelée après un clic mais le message n'est pas visible. Est-il possible de l'appeler pour la première fois avec message et show chaque fois que l'utilisateur utilise la souris? 

J'ai remplacé jQuery par jQ car je crée mon propre plugin (cela ne pose pas le problème)

javascriptjqueryhtmlhtml5canvas
6
pawan kumar

Une bonne approche native consiste à utiliser dispatchEvent method sur EventTarget.

Il distribue un Event au EventTarget spécifié, en invoquant le EventListeners concerné dans l'ordre approprié. Les règles normales de traitement des événements (y compris la phase de capture et la phase de bullage facultative) s'appliquent également aux événements envoyés manuellement avec dispatchEvent ().

Essayer 

// 1. Add an event listener first
canvas.addEventListener('mousemove', tooltipDraw ,0);

// 2. Trigger this event wherever you wish
canvas.dispatchEvent(new Event('mousemove'));

dans votre cas, cela devrait déclencher l'événement mousemove sur l'élément canvas.

( Déclencher des événements dans Vanilla JavaScript article peut être aussi utile):

var elem = document.getElementById('elementId');

elem.addEventListenter('mousemove', function() {
  // Mousemove event callback
}, 0);

var event = new Event('mousemove');  // (*)
elem.dispatchEvent(event);

// Line (*) is equivalent to:
var event = new Event(
    'mousemove',
    { bubbles: false, cancelable: false });

jQuery:

Essayez ceci avec la méthode jQuery trigger: 

 $('body').bind('mousemove',function(e){   
    // Mousemove event triggered!
});
$(function(){
    $('body').trigger('mousemove');
});

OU (si vous avez besoin de déclencher avec des coordonnées)

event = $.Event('mousemove');

// coordinates
event.pageX = 100;
event.pageY = 100; 

// trigger event
$(document).trigger(event);

OU Essayez d’utiliser la méthode .mousemove () jQuery

11
Andrii Verbytskyi

Bien qu’il soit probablement possible d’imiter un événement comme le montre la réponse d’Andrii Verbytskyi, la plupart du temps, lorsque vous voulez le faire, c’est à cause d’un "problème X-Y" . 

Si nous prenons le cas de OP par exemple, ici nous n’avons absolument pas besoin de déclencher cet événement mousemove.

Pseudo-code de la mise en oeuvre actuelle:

function mousemoveHandler(evt){
    do_something_with(evt.pageX, e.pageY);
}
element.addEventListener('mousemove', mousemoveHandler)

function clickHandler(evt){
    do_something_else();
}
element.addEventListener('click', clickHandler);

Et ce que nous voulons, c'est aussi appeler do_something_with dans le gestionnaire de clics.

Donc, OP passe du temps à trouver un moyen de déclencher un faux déplacement de souris, passe un peu plus de temps à essayer de le mettre en œuvre, alors qu’il suffit d’ajouter un appel à do_something_with dans clickHandler.

Les événements mousemove et click ont ​​tous les deux les propriétés pageX et pageY. Ils peuvent donc être transmis tels quels, mais dans le cas contraire, nous pourrions également vouloir les transmettre avec un faux objet contenant les propriétés requises.

function mousemoveHandler(evt){
    do_something_with(evt.pageX, evt.pageY);
}
element.addEventListener('mousemove', mousemoveHandler)

function clickHandler(evt){
    do_something_else();
    do_something_with(evt.pageX, evt.pageY);
}
element.addEventListener('click', clickHandler);
// here we won't have pageX nor pageY properties
function keydownHandler(evt){
    do_something_else();
    // create a fake object, which doesn't need to be an Event
    var fake_evt = {pageX: someValue, pageY: someValue};
    do_something_with(fake_evt.pageX, fake_evt.pageY);
}
element.addEventListener('keydown', keydownHandler);

Note: vous mélangez jQuery.on et element.addEventListener, vous devrez peut-être alors transmettre la propriété originalEvent de l'objet événement jQuery.

0
Kaiido