使用Jquery或Javascript触发mousemove事件


Trigger mousemove event using Jquery or Javascript

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

说明：

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

我想做的事 ：

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

问题：

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

码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
      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();
       });

我做了一个单击后被调用的函数，但是消息不可见。有什么方法可以用消息第一次调用它，并且在用户每次使用鼠标时都显示。

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

相关讨论

一个好的本地方法是在EventTarget上使用dispatchEvent方法。

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

尝试

1
2
3
4
5
// 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事件。

(在原始JavaScript文章中触发事件也可能有用)：

1
2
3
4
5
6
7
8
9
10
11
12
13
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方法：

1
2
3
4
5
6
 $('body').bind('mousemove',function(e){  
    // Mousemove event triggered!
});
$(function(){
    $('body').trigger('mousemove');
});

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

1
2
3
4
5
6
7
8
event = $.Event('mousemove');

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

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

要么
尝试使用.mousemove()jQuery方法

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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();
相关讨论

尽管很可能可以模仿Andrii Verbytskyi的回答中所示的事件，但在大多数情况下，当您要执行此操作时，这是因为存在" X-Y问题"。

如果我们以OP的情况为例，在这里我们绝对不需要触发此mousemove事件。

当前实现的伪代码：

1
2
3
4
5
6
7
8
9
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花了一些时间来找到一种触发假鼠标移动的方法，花了另一时间尝试实现它，而所需要做的只是在clickHandler中添加对do_something_with的调用。

mousemove和click事件都具有这些pageX和pageY属性，因此可以传递的事件为is，但在其他情况下，我们也可能只想将其与包含必需属性的假对象一起传递。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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属性。