javascript - 在画布 html5 页面上模拟鼠标上下

Question

如何模拟鼠标按下，然后在 aspx 页面的画布 hmtl5 部分上模拟鼠标向上事件？

我在网上搜索并找到了这个......但我无法将它与我的画布 html5 元素相关联，有人可以帮忙吗？

dispatchMouseEvent(element, 'mouseover', true, true);
dispatchMouseEvent(element, 'mousedown', true, true);
dispatchMouseEvent(element, 'click', true, true);
dispatchMouseEvent(element, 'mouseup', true, true);

Answer 1

“模拟”事件非常容易，实际上，您可以简单地触发它们。使用 jQuery，这变成了孩子的游戏（有关工作示例，请参见此 jsfiddle ）：

$('#canvas_element').on("mousedown mouseup", function(e) {
console.log(e.type + " event fired at coords: " + e.pageX + ", " + e.pageY);
});

x_coord = 1;
y_coord = 1;

var e = jQuery.Event( "mousedown", { pageX: x_coord, pageY: y_coord } );
$('#canvas_element').trigger(e);

// execute more code
x_coord = 255;
y_coord = 255;

var e = jQuery.Event( "mouseup", { pageX: x_coord, pageY: y_coord } );
$('#canvas_element').trigger(e);

有关纯 JavaScript 解决方案，请参阅这个旧的 SO 问题。