更改事件类型

Question

是否可以更改 JavaScript 中事件的类型？

在这种情况下，我在画布上使用 jQuery 触发事件，但在呈现此画布的特定元素上触发事件，例如绘制的形状或图像。

mousemoveevent ---> [canvas] -> [find element] ---> mousemoveoverelementevent

基本上我在整个画布上捕获 onmousemove 事件：

$('canvas').bind('mousemove'........

但是画布内不存在 DOM，所以我希望它转换（在过程中稍后跟进）到：

$('canvas').bind('mousemoveOverElement'........
$('canvas').bind('mouseenterOnElement'........
$('canvas').bind('mouseleaveOnElement'........

然后分配类似

e.element = 'imageAtACertainPositionInTheCanvas'

I 更喜欢传递修改的事件而不是分配新的回调。

Answer 1

• CanvasScript3 提供了一个具有某些功能（例如事件）的库。 MouseOver 事件有一些内容，MouseOut 事件。检查测试列表。
• 前面的 stackoverflow 问题。
• HTML5 Canvas 矩形区域鼠标悬停教程

您可能想阅读Sprite 和 Canvas 的问题及其相对较差的性能。

Answer 2

我没听懂你说的，也许你能说得更具体一些。

我知道您可以更改自定义事件的类型。

// Custom mouse events
var myEvent = document.createEvent ("MouseEvents");

// Click
myEvent.initMouseEvent ("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

// Dispatch
link.dispatchEvent (myEvent);

// Changed the type
myEvent.initMouseEvent ("mousemove", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

// Dispatch
link.dispatchEvent (myEvent);

无论如何，这个链接可以帮助你：

DOM Level 3 Events

nsIDOMWindowUtils

Answer 3

[示例]

var img = new Image();
img.src = "...";
var $img = $(img);

$img.mousemove(function(_, e){
  console.log(e.pageX);                    
});

$('canvas').mousemove(function(e){
  if (mouse_over_image(e.pageX, e.pageY)) {
    e.target = img;
    $img.trigger("mousemove", e);
  }
});

Answer 4

我相信您正在寻找的答案是“jQuery 自定义事件”。 jQuery 自定义事件使您能够命名和组织事件处理程序；然后，这些事件处理程序可以由 $(el).trigger('the_event') 触发。只需谷歌搜索该词的用法和示例即可。

我不认为它可以覆盖事件对象，就像您建议的 e.element 一样。您可能需要重新考虑流程以适应它。

（并不是说这个答案值得200声望，但无论如何，希望它对您找到方法有帮助。）