使用Jquery或Javascript触发mousemove事件 [英] Trigger mousemove event using Jquery or Javascript

问题描述

我知道我们可以触发click事件.但是我想知道我们是否可以触发mousemove事件，而无需用户实际进行任何鼠标移动.

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

说明:

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

I want to show a message when user select something. on canvas ,my canvas is of full height and width,when user click on a button the canvas shows up. when user do mouse movement he see a message "Click and drag on any part of the web page". this message follows the mouse movement of the user.

我想做什么:

当用户单击按钮时，他应该看到消息单击并拖动网页的任何部分".无论用户将鼠标移到何处，消息都必须紧随其后.

When user click the button he should see the message that "Click and drag on any part of the web page". and message must follow wherever user moves the mouse.

问题:

用户单击后才能看到消息，直到他/她移动鼠标为止.

User is not able to see the message after click until he/she moves his mouse.

代码:

      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 have made a function which is called after click but the message is not visible. Is there any way to call it for the first time with message and show is everytime when user uses mouse.

我用jQ替换了jQuery，因为我正在制作自己的插件(这不会引起问题)

推荐答案

一个好的本地方法是使用

A good native approach is to use dispatchEvent method on EventTarget.

它在指定的 EventTarget 上调度 Event ，并以适当的顺序调用受影响的 EventListeners .正常的事件处理规则(包括捕获和可选的冒泡阶段)也适用于使用dispatchEvent()手动分派的事件.

It dispatches an Event at the specified EventTarget, invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with 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事件.

in your case it should trigger mousemove event on canvas element.

(在香草JavaScript中触发事件文章也可能有用) :

(Triggering events in vanilla JavaScript article can be also useful):

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方法:

Try this with jQuery trigger method:

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

或(如果需要使用坐标触发)

OR (if you need triggering with coords)

event = $.Event('mousemove');

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

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

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

OR Try using .mousemove() jQuery method

这篇关于使用Jquery或Javascript触发mousemove事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！