webentwicklung-frage-antwort-db.com.de

Lösen Sie das Mousemove-Ereignis mit Jquery oder Javascript aus

Hallo, ich weiß, dass wir ein Klickereignis auslösen können. Ich möchte jedoch wissen, dass wir ein Mausemove-Ereignis auslösen können, ohne dass der Benutzer eine Mausbewegung ausführt.

Beschreibung :

Ich möchte eine Nachricht anzeigen, wenn der Benutzer etwas auswählt. Auf der Leinwand ist meine Leinwand in voller Höhe und Breite. Wenn der Benutzer auf eine Schaltfläche klickt, wird die Leinwand angezeigt. Wenn der Benutzer eine Mausbewegung ausführt, wird die Nachricht "Klicken und ziehen Sie einen beliebigen Teil der Webseite" angezeigt. Diese Meldung folgt der Mausbewegung des Benutzers.

Was ich machen will; was ich vorhabe zu tun :

Wenn der Benutzer auf die Schaltfläche klickt, sollte er die Meldung "Klicken und ziehen Sie einen beliebigen Teil der Webseite" sehen. und eine Nachricht muss folgen, wohin der Benutzer die Maus bewegt.

Problem :

Der Benutzer kann die Nachricht nach dem Klicken erst sehen, wenn er die Maus bewegt.

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();
       });

Ich habe eine Funktion erstellt, die nach dem Klicken aufgerufen wird, aber die Nachricht ist nicht sichtbar. Gibt es eine Möglichkeit, es zum ersten Mal mit message und show aufzurufen, wenn der Benutzer die Maus verwendet. 

Ich habe jQuery durch jQ ersetzt, weil ich mein eigenes Plugin mache (dies verursacht nicht das Problem)

6
pawan kumar

Ein nativer Ansatz ist die Verwendung der dispatchEvent -Methode für EventTarget.

Es sendet ein Event am angegebenen EventTarget und ruft die betroffenen EventListeners in der entsprechenden Reihenfolge auf. Die normalen Ereignisverarbeitungsregeln (einschließlich der Erfassungs- und optionalen Bubbling-Phase) gelten auch für Ereignisse, die manuell mit dispatchEvent () ausgelöst werden.

Versuchen 

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

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

in Ihrem Fall sollte es ein Mousemove-Ereignis auf dem Zeichenelement auslösen.

( Auslösen von Ereignissen in Vanilla JavaScript article kann auch nützlich sein):

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:

Versuchen Sie dies mit der Methode jQuery trigger

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

ODER (wenn Sie mit Koordinaten auslösen möchten)

event = $.Event('mousemove');

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

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

ODER Versuchen Sie es mit der .mousemove () jQuery-Methode

11
let coordX = 0; // Moving from the left side of the screen
let coordY = window.innerHeight / 2; // Moving in the center

function move() {
    // Move step = 20 pixels
    coordX += 20;
    // Create new mouse event
    let ev = new MouseEvent("mousemove", {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: coordX,
        clientY: coordY
    });

    // Send event
    document.querySelector('Put your element here!').dispatchEvent(ev);
    // If the current position of the fake "mouse" is less than the width of the screen - let's move
    if (coordX < window.innerWidth) {
        setTimeout(() => {
            move();
        }, 10);
    }
}

// Starting to move
move();
1

Obwohl es wahrscheinlich möglich ist, ein solches Ereignis nachzuahmen, wie es in der Antwort von Andrii Verbytskyi gezeigt wird, ist die meiste Zeit, wenn Sie es tun wollen, ein "X-Y-Problem"

Wenn wir zum Beispiel den Fall von OP betrachten, brauchen wir dieses Mousemove-Ereignis absolut nicht auszulösen.

Pseudocode der aktuellen Implementierung:

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

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

Und wir möchten im Click-Handler auch do_something_with aufrufen.

Daher braucht OP einige Zeit, um einen Weg zu finden, um eine gefälschte Maus zu starten, und es dauert eine weitere Zeit, um es zu implementieren, während es lediglich erforderlich ist, einen Aufruf von do_something_with in clickHandler hinzuzufügen.

Beide Mauszeiger- und Klickereignisse verfügen über diese pageX- und pageY-Eigenschaften, sodass das Ereignis übergeben werden kann. In anderen Fällen möchten wir es jedoch auch mit einem falschen Objekt übergeben, das die erforderlichen Eigenschaften enthält.

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);

Hinweis : Sie mischen jQuery.on und element.addEventListener, daher müssen Sie möglicherweise die originalEvent-Eigenschaft des jQuery-Ereignisobjekts übergeben.

0
Kaiido