![](/img/trans.png)
[英]Image follow the mouse, using mousemove event (using Jquery/Javascript)
[英]Trigger mousemove event using Jquery or Javascript
嗨,我知道我們可以觸發點擊事件。 但我想知道我們可以觸發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();
});
我已經創建了一個在單擊后調用的函數,但該消息不可見。 有沒有辦法第一次使用消息和show顯示每次用戶使用鼠標時。
我用jQ替換了jQuery,因為我正在創建自己的插件(這不會導致問題)
一個好的本機方法是在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'));
在你的情況下,它應該在canvas元素上觸發mousemove事件。
( 在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');
});
或者(如果你需要用coords觸發)
event = $.Event('mousemove');
// coordinates
event.pageX = 100;
event.pageY = 100;
// trigger event
$(document).trigger(event);
或者嘗試使用.mousemove() jQuery方法
盡管可能有可能模仿Andrii Verbytskyi的答案所示的事件,大多數時候,當你想要這樣做時,這是因為“XY問題” 。
例如,如果我們采用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);
我們想要的是在click處理程序中調用do_something_with
。
所以OP花了一些時間來尋找觸發虛假鼠標移動的方法,花費另一段時間來嘗試實現它,而所需要的只是在clickHandler
添加對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
,因此您可能需要傳遞jQuery事件對象的originalEvent屬性。
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();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.