使用Jquery或Javascript触发mousemove事件

Question

嗨,我知道我们可以触发点击事件.但我想知道我们可以触发mousemove事件,而不会被用户实际移动鼠标.

说明:

我想在用户选择某些内容时显示一条消息.在画布上,我的画布具有完整的高度和宽度,当用户单击画布上显示的按钮时.当用户进行鼠标移动时,他会看到一条消息"点击并拖动网页的任何部分".此消息跟随用户的鼠标移动.

我想做的事 :

当用户单击按钮时,他应该看到"单击并拖动网页的任何部分"消息.只要用户移动鼠标,就必须遵循消息.

问题:

用户在点击之后无法看到该消息,直到他/她移动他的鼠标.

码:

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

我已经创建了一个在单击后调用的函数,但该消息不可见.有没有办法第一次使用消息和show显示每次用户使用鼠标时.

我用jQ替换了jQuery,因为我正在创建自己的插件(这不会导致问题)

Answer 1

一个好的原生方法是dispatchEvent在EventTarget 上使用方法.

它在指定的EventTarget上调度Event,以适当的顺序调用受影响的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'));

在你的情况下,它应该在canvas元素上触发mousemove事件.

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

或者(如果你需要用coords触发)

event = $.Event('mousemove');

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

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

或者尝试使用.mousemove() jQuery方法

Answer 2

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