Mousemove trigger event using jquery or javascript

Question

Hi, I know that we can trigger the click event. but I want to know that we can fire the mousemove event without any actual mouse movement by the user.

Description:

I want to show a message when the user selects something. on canvas my canvas is full height and width, when the user clicks the button, the canvas appears. when the user makes a mouse movement, he sees the message "Click and drag any part of the web page." This message follows the user's mouse movement.

What I want to do:

When the user clicks the button, he should see a message that says "Click and drag any part of the web page." and the message should follow wherever the user moves the mouse.

Problem:

The user cannot see the message after clicking until he / she moves the mouse.

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

I created a function that is called after a click, but the message does not appear. Is there a way to call it for the first time with a message and show it every time the user uses the mouse.

I replaced jQuery with jQ because I am making my own plugin (this does not cause a problem)

Answer 1

A good native approach is to use the method dispatchEventon EventTarget.

EventTarget, EventListeners . ( ) , dispatchEvent().

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

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

mousemove canvas.

( JavaScript ):

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

jQuery trigger:

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

( )

event = $.Event('mousemove');

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

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

. Mousemove() jQuery

Answer 2

, , , , , , - " XY" .

OP, , mousemove.

:

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

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

do_something_with .

, OP , mousemove, , , , - do_something_with clickHandler.

mousemove click pageX pageY, , , , .

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

: jQuery.on element.addEventListener, originalEvent jQuery.