Событие триггера mousemove с использованием JQuery или Javascript

Question

Привет, я знаю, что мы можем вызвать событие click. но я хочу знать, что мы можем инициировать событие 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(); 
     }); 

Я сделал функцию, которая вызывается после щелчка, но сообщение не видно. Есть ли способ вызвать его в первый раз с сообщением и показать каждый раз, когда пользователь использует мышь.

Я заменил JQuery с JQ, потому что я делаю свой собственный плагин (это не вызывает проблем)

Answer 1

Хороший родной подход заключается в использовании метода dispatchEvent на 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 событие на холсте элемента.

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

ИЛИ (если вам нужно запуск с помощью коордов)

event = $.Event('mousemove'); 

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

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

ИЛИ Попробуйте использовать метод .mousemove() JQuery

Answer 2

Albeit это, вероятно, можно имитировать такое событие, как показано в ответ андрей Вербицкого, большая часть времени, когда вы хотите сделать это, то это потому, от "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, тратит еще много времени на его реализацию, в то время как все, что необходимо, - это добавить звонок в 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.