使用 Jquery 或 Javascript 触发 mousemove 事件

Posted 2023-05-08

【中文标题】使用 Jquery 或 Javascript 触发 mousemove 事件

【英文标题】：Trigger mousemove event using Jquery or Javascript

【发布时间】：2017-04-29 19:44:09

【问题描述】：

嗨，我知道我们可以触发点击事件。但我想知道我们是否可以在没有用户实际移动鼠标的情况下触发 mousemove 事件。

说明：

我想在用户选择某些内容时显示一条消息。在画布上，我的画布是全高和全宽的，当用户单击一个按钮时，画布就会显示出来。当用户移动鼠标时，他会看到一条消息“单击并拖动网页的任何部分”。此消息跟随用户的鼠标移动。

我想做什么：

当用户单击按钮时，他应该会看到“单击并拖动网页的任何部分”的消息。并且消息必须跟随用户移动鼠标的位置。

问题：

用户在点击后无法看到消息，直到他/她移动鼠标。

代码：

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

                 jQ('body').prepend('<canvas id="uxa-canvas-container"   ></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();
       );

我创建了一个在单击后调用但消息不可见的函数。有没有办法第一次用消息调用它，并且每次用户使用鼠标时都会显示。

我已经用 jQ 替换了 jQuery，因为我正在制作自己的插件（这不是问题的原因）

【问题讨论】：

什么是jQUxarmy？应该是jQuery？

这是什么jQUxarmy？它是 jQuery 的编辑版本吗？

我已经用我自己的变量 jQUxarmy 替换了 jquery。

为什么不在点击处理程序的末尾添加对tooltipDraw 的调用？你只需要传递 click 事件的参数就可以了，没有？

实际上是在单击时调用该函数，但仅在用户移动鼠标时才绘制文本。我正在寻找任何内容，以便在用户单击后立即显示文本。所以我需要生成mousemove事件@Kaiido

【参考方案1】：

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

它在指定的 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'));

在您的情况下，它应该在画布元素上触发 mousemove 事件。

（Triggering events in 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');
);

OR（如果您需要使用坐标触发）

event = $.Event('mousemove');

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

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

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

【讨论】：

还有 initMouseEvent

initMouseEvent 功能已已弃用，并已从 Web 标准中删除。 developer.mozilla.org/ru/docs/Web/API/MouseEvent/initMouseEvent

我尝试了最后一种方法，但在此处发布问题之前它没有奏效。我想在没有用户交互的情况下触发事件。

所有这些都在没有用户交互的情况下调度事件。试试canvas.dispatchEvent(new Event('mousemove'));，在你的情况下，它应该在画布元素上触发 mousemove 事件。

我尝试过使用 canvas.dispatchEvent(new Event('mousemove'),tooltipDraw,0);但它没有用。

【参考方案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();

【讨论】：

我非常喜欢这个解决方案。谢谢你。

【参考方案3】：

尽管有可能模仿 Andrii Verbytskyi 的回答中所示的这样一个事件，但大多数时候，当您想要这样做时，这是因为 "X-Y problem"。

如果我们以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，又花了一些时间来尝试实现它，而所需要的只是在 clickHandler 中添加对 do_something_with 的调用。

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，因此您可能需要传递jQuery 事件对象的 originalEvent 属性。