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

我已經做了這是點擊後調用，但該消息是不可見的功能。有沒有什麼辦法可以第一次使用消息來調用它，並且當用戶使用鼠標時每次都顯示。

我已經取代jQuery的與JQ，因爲我在做我自己的插件（這是不是造成問題的原因）

Answer 1

一個很好的本地方法是使用dispatchEvent方法對事件目標。

，它會分派事件在指定事件目標，調用影響事件偵聽適當的順序。正常的事件處理規則（包括捕獲和可選冒泡階段）也適用於使用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元素上觸發鼠標移動事件。

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

OR 嘗試使用.mousemove() jQuery的方法

Answer 2

儘管它可能是能夠模仿這種情況下，如圖安德里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財產。