イベントの種類を変更する

Question

JavaScriptのイベントtypeを変更することはできますか？

このシナリオでは、キャンバス上でjQueryを使用してイベントをトリガーしていますが、描かれた図形や画像のような、このキャンバスの特定の要素についてトリガーしています。

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

基本的に私は完全なキャンバスオーバーれるonmousemoveイベントをキャッチ：

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

が、私はそれが（プロセスの後半でアップchatchする）変換したいので、DOMは、キャンバス内に存在しませんTo：その後、

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

と

e.element = 'imageAtACertainPositionInTheCanvas' 

のようなものを割り当てます

新しいコールバックを割り当てる代わりに、変更されたイベントを渡すことをお勧めします。

Answer 1

• CanvasScript3は、イベントなどの特定の機能を備えたライブラリを提供します。 MouseOverイベントには、MouseOutというイベントがいくつかあります。 list of testsを確認してください。
• 以前のstackoverflow questionsでは、イベントをキャンバスの「要素」に関連付ける例もあります。
• HTML5 Canvas Rectangular Region Mouseover Tutorial

あなたもSprite and Canvasの問題とそれらの相対的な悪いパフォーマンスを読みたいと思うかもしれません。

Answer 2

あなたが求めている答えは「jQueryカスタムイベント」です。 jQueryカスタムイベントには、イベントハンドラの名前を付けて整理する機能があります。これらのイベントハンドラは$(el).trigger('the_event')によってトリガされます。ちょうど使用法と例のための単語のためのgoogle。

イベントオブジェクトを上書きすることはできません。e.elementのように提案しました。それに合わせて流れを再考する必要があるかもしれません。

（あなたが道を探して、それは便利ですことを願っていない、200評判に値する、この答えていることが、ここで、それはとにかくです。）

Answer 3

私はあなたが言ったことを理解していなかった、多分あなたはより具体的な可能性。

私はあなたが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

Answer 4

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