嗨,我知道我们可以触发点击事件。但我想知道我们可以触发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,因为我正在创建自己的插件(这不会导致问题)
答案 0 :(得分:13)
一个好的原生方法是在EventTarget上使用dispatchEvent
方法。
在指定的 EventTarget 中调度事件,以适当的顺序调用受影响的 EventListeners 。正常的事件处理规则(包括捕获和可选的冒泡阶段)也适用于使用dispatchEvent()手动调度的事件。
尝试
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 });
在你的情况下,它应该在canvas元素上触发mousemove事件。
(Triggering events in vanilla JavaScript文章也很有用):
trigger
<强> jQuery的:强>
尝试使用jQuery $('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(如果您需要使用coords触发)
sqlplus
OR 尝试使用.mousemove() jQuery方法
答案 1 :(得分:1)
虽然可能模仿Andrii Verbytskyi的回答中所显示的事件,但大部分时间,当你想要这样做时,这是因为"X-Y problem"。
例如,如果我们采用OP的案例,我们绝对不需要触发此鼠标移动事件。
当前实施的伪代码:
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花了一些时间来寻找触发虚假鼠标移动的方法,花费额外的时间来尝试实现它,而所有需要的是在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属性。
答案 2 :(得分:1)
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();