5

How can I simulate a mouse down and then followed by a mouse up event on a canvas hmtl5 section of an aspx page?

I searched on the web and found this... but i cannot correlate this to my canvas html5 element, Can anyone help ? 

dispatchMouseEvent(element, 'mouseover', true, true);
dispatchMouseEvent(element, 'mousedown', true, true);
dispatchMouseEvent(element, 'click', true, true);
dispatchMouseEvent(element, 'mouseup', true, true);
Philo
  • 1,931
  • 12
  • 39
  • 77
  • You might found [this](http://stackoverflow.com/a/4176116/2264512) one. Please read the complete answer. `dispatchMouseEvent` is a user defined function here. – N K Oct 28 '13 at 10:28

1 Answers1

8

"Simulating" events is very easy, in fact, you can simply trigger them. Using jQuery, this becomes child's play (see this jsfiddle for working example):

$('#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);

See this old SO question for a pure javascript solution.

Community
  • 1
  • 1
user2701675
  • 160
  • 1
  • 5
  • so my canvas element is called 'myCanvas'. How would I siumlate the mouse down and up event with the above code? – Philo Aug 21 '13 at 19:02
  • I tried putting the above code inside a function, and the code never gets called when the function is initiated. – Philo Aug 21 '13 at 19:09
  • The questions you ask are pretty much basics, [jQuery selectors](http://api.jquery.com/category/selectors/) should be a decent start. Also, note that the above code is in fact dependant on the [jQuery](http://www.jquery.com/) library. Declaring functions is ofcourse pointless if you aren't going to actually execute them at some point in your code. – user2701675 Aug 21 '13 at 20:34
  • well the code snippet is in a function A (). the function gets called and all the rest of the code within the function is executed except for the part of the jquery event simulating snippet. – Philo Aug 21 '13 at 20:41
  • It should show output in the browser's console- make sure you have it open, or change the console.log() command to an alert(). Either way, the PoC and working example for this code can be found in the already linked to [jsfiddle](http://jsfiddle.net/gAxHe/3/). – user2701675 Aug 21 '13 at 22:34
  • hm. That seems to be working on jsfiddle but not on my code. What I am trying to do is :- http://jsfiddle.net/gAxHe/4/ Once the button9 is clicked on my aspx page, I want a whole series of actions to be performed. Can you take a look? – Philo Aug 22 '13 at 17:38
  • TypeError: document.getElementById('<%=Button9.ClientID%>') is null. I doubt javascript is able to parse .NET- You might want to find the ID your server-side script generates instead (Check the HTML source where this control resides on). – user2701675 Aug 23 '13 at 21:38
  • 1
    `pageX` and `pageY` are read-only props. how did you manager to write to them? – dopatraman Jul 24 '15 at 20:08
  • I would be interested in how this would be implemented with vanilla JS. Jquery obscures much of what's going on here. – David Bandel Jan 28 '22 at 16:28
  • Just to be clear, the link you provided to an old post doing this with vanilla js, in fact does not do this in vanilla js. It does something completely different – David Bandel Jan 28 '22 at 18:20