在HTML5画布页面上模拟鼠标按下和松开

Question

如何在 aspx 页面的 canvas html5 部分模拟鼠标按下事件，然后是鼠标抬起事件？

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

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

- Philo

---

你可能会在这里找到答案。请阅读完整的回答。dispatchMouseEvent是一个用户自定义函数。 - N K

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

请查看这个老的SO问题，了解一个纯JavaScript解决方案。

- user2701675

---

我的画布元素被称为“myCanvas”。如何使用上述代码模拟鼠标按下和松开事件？ - Philo

我尝试将上述代码放入一个函数中，但是当函数被调用时，该代码从未被调用。 - Philo

你提出的问题基本上都是基础知识，jQuery 选择器应该可以作为一个不错的开始。另外，请注意上述代码实际上依赖于 jQuery 库。当然，如果你在代码中没有打算实际执行这些函数，声明它们就没有意义了。 - user2701675

类型错误：document.getElementById('<%=Button9.ClientID%>')为空。我怀疑JavaScript无法解析.NET-您可能需要查找服务器端脚本生成的ID（检查此控件所在的HTML源）。 - user2701675

pageX和pageY是只读属性。你是如何设法对它们进行写入的？ - dopatraman