Change event type

Question

Can I change typeevents in JavaScript?

in this scenario, I fire events with jQuery on the canvas, but on certain elements in the rendering of this canvas, for example, drawn shapes or images.

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

Basically I will catch the onmousemove event on a full canvas with:

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

but the DOM does not exist inside the canvas, so I want it to be converted (for later addition in the process):

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

and then assign something like

e.element = 'imageAtACertainPositionInTheCanvas'

I prefer to send a modified event instead of assigning a new callback.

Answer 1

• CanvasScript3 , . MouseOver event, MouseOut. .
• Canvas fooobar.com/questions/28688/....
• HTML5 Canvas Rectangular Region Mouseover Tutorial

, 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 3

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

I believe the answer you're looking for is a jQuery custom event . The jQuery special event provides you with the ability to name and organize event handlers; these event handlers can be activated with $(el).trigger('the_event'). Just google for word to use and example.

I cannot overwrite the event object, for example e.element. You may need to rethink the stream to match it.

(Not that this answer costs 200 reputation, but here it is anyway, I hope you find it helpful to find a way.)