更改事件类型答案

【问题标题】：Change the type of events更改事件类型
【发布时间】：2011-01-25 22:12:19
【问题描述】：

是否可以在 JavaScript 中更改事件的type？

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

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

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

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

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

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

然后分配类似

的东西

e.element = 'imageAtACertainPositionInTheCanvas'

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

【问题讨论】：

如果您需要绘制的元素来触发事件，您使用画布而不是 SVG 是否有特定原因？
@robertc，是的，我对“元素”进行的主要是像素操作。几乎没有向量。
与其尝试改变事件名称，不如简单地创建并触发您希望的类型的新事件。
@Phrogz，关于传递事件的“匿名”行为和与 jQuery 的兼容性，我更喜欢传递具有一些更改字段的相同事件对象，而不是一个全新的。这将防止调用者收到意外或丢失的数据或格式。
你不能创建一个自定义事件并简单地将所有其他属性复制到其中吗？

标签： javascript jquery html canvas

【解决方案1】：

CanvasScript3 提供了一个具有某些功能的库，例如事件。 MouseOver 事件，MouseOut 事件有一些东西。检查list of tests。
在之前的stackoverflow questions 中也有将事件与画布“元素”相关联的示例。
HTML5 Canvas Rectangular Region Mouseover Tutorial

您可能还想阅读Sprite and Canvas 的问题以及他们相对较差的表现。

【讨论】：

+1 并回答为我指明了正确的方向。感谢您提供出色的链接；）所有答案都非常有用，但是这个为我提供了最大的信息资源。

【解决方案2】：

我没听懂你说的，也许你可以更具体一点。

我知道您可以更改custom event 的类型。

// 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

【讨论】：

【解决方案3】：

[Example]

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

【讨论】：

@Caspar - 从那时起该示例已更新。请再检查一次。（我离开了...顺便说一句，这就是没有图像的原因）
我认为这不是我想要的。 $img 在这里没有任何作用，如果图像在画布中的偏移量不同于 (0,0).... 现在 canvas.mousover 在 new中直接传递给 $img mousover > 事件触发器。

【解决方案4】：

我相信您正在寻找的答案是“jQuery 自定义事件”。 jQuery 自定义事件为您提供命名和组织事件处理程序的能力；然后可以由$(el).trigger('the_event') 触发这些事件处理程序。只需 google 一下这个词的用法和示例。

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

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

【讨论】：