I would like to know how I can use JavaScript to find out the location of the mouse pointer when it is within the bounds of an SVG viewBox. Do I need to use the event model to keep track of all the various mouse motion events, or is there a way I can poll the mouse pointer to have it tell me where it is when I need it?
You can hook to the onmousemove event and access the event object:
function on_mouse_move(evt) {
var
x = evt.clientX,
y = evt.clientY;
}
(This assumes on_mouse_move is connected to the onmousemove event of your SVG document).
Related
I'm tracking the mouse curse with an event listener
window.addEventListener('mousemove', function);
I want to measure the distance from the position the cursor was at when the event listener is instantiated (via a separate 'click' event) to it's current position. To this end, I've tried capturing the the event.clientX and event.clientY positions at the start of the event and assigning them to variables
originX = event.clientX
originY = event.clientY
However, these reference the .clientX/Y positions, so these variables change on every mousemove event. How can I capture the first value of the event.clientX/Y so I can calculate the delta?
How do I trigger a mouse move event with custom coordinates in jQuery?
I tried the following:
canvas1.trigger('mousemove',{pageX: window.width/2 , pageY: window.height/2});
and I also tried running this:
canvas1.trigger('mousemove',{pageX: 800 , pageY: 800});
However the pageX and pageY seems to be undefined in the event.
I've called this inside a mouse move event:
console.log("Fake mouse move event called successfully! X:", e.pageX, "& Y:", e.pageY);
And I didn't move my mouse at all so I could only see the fake event.
This is the result I am getting:
Fake mouse move event called successfully! X: undefined & Y: undefined
I also tried this with clientX and clientY, and the problem persists..
Has anyone got an idea to how to fix this problem? Have no idea what is going on here.
Thanks, help much appreciated!
EDIT:
canvas1 = $("#canvas");
See this answer.
Here is how you can create an event and customize its properties in jQuery.
// create a jQuery event
e = $.Event('mousemove');
// set coordinates
e.pageX = 100;
e.pageY = 100;
// trigger event - must trigger on document
$(document).trigger(e);
Okay this might help then, (editing the answer)
How to simulate a click by using x,y coordinates in JavaScript?
I need to track mouse position relative to a <canvas> element in my app. Currently, I have a mousemove event listener attached to the <canvas> that updates my mouse position whenever it fires, using offsetX/offsetY when available, or layerX/layerY when the offsetX/Y is not available. Using offsetX/Y or layerX/Y gives me mouse coordinates relative to my <canvas>, which is exactly what I want. As my app works its magic, various CSS 3d transformations get applied to the <canvas>, and even when <canvas> is very transformed, offsetX/Y still gives me accurate coordinates within the <canvas>'s local, transformed coordinate-space.
That's kind of confusing, so I'll try stating an example. If my <canvas> is 100px in both width and height, and is located at (0,0) relative to the browser viewport, and I click at (50,50) (in viewport coords), that corresponds to (50,50) in my <canvas>, and 50 is the value that is (correctly) returned via offsetX and offsetY. If I then apply transform: translate3d(20px,20px,0px) to my <canvas> and click at (50,50) (in viewport coords), since my canvas has been shifted 20px down and 20px to the right, that actually corresponds to (30,30) relative to the <canvas>, and 30 is the value that is (correctly) returned via offsetX and offsetY.
The problem I'm facing is what to do when the user is not physically moving the mouse, yet the <canvas> is being transformed. I'm only updating the position of the mouse on mousemove events, so what do I do when there is no mousemove?
For example. My mouse is positioned at (50,50) and no transformations are applied to the <canvas>. My this.mouseX and this.mouseY are both equal to 50; they were saved at the final mousemove event when I moved the mouse to (50,50). Without moving the mouse at all, I apply the above transformation (transform: translate3d(20px,20px,0px)) to my <canvas>. Now, I need this.mouseX and this.mouseY to each be equal to 30, as that is my mouse's new position relative to the current transformation of <canvas>. But this.mouseX and this.mouseY are still equal to 50. Since I never moved the mouse, there was no mousemove event fired, and those saved coords never got updated.
How can I deal with this? I thought about creating a new jQuery event, manually assigning some properties (pageX and pageY?) based on my old/previous mouse position, and then triggering that event, but I don't think that's going to cause the browser to recalculate the offsetX and offsetY properties. I've also been thinking about taking the known old/previous mouse position and multiplying it by my transformation matrix, but that's going to get real complicated since my mouse coordinates are in 2d-space, but the transformations I'm applying to <canvas> are all 3d transformations.
I guess really, what I want to do is take my known 2d page position and raycast it into the 3d space and find out where I'm hitting the transformed <canvas>, all in javascript (jQuery is available).
Is this possible? Does this even make sense?
Works in all browsers
var mouseX=0;
var mouseY=0;
var canvas = document.querySelector('#canvas');
var rect = canvas.getBoundingClientRect();
document.onmousemove = function(e) {
mouseX=e.clientX-rect.left;
mouseY=e.clientY-rect.top;
};
function updateCoords() {
mouseX=e.clientX-mouseX;
mouseY=e.clientY-mouseY;
setTimeout(updatecoords,10);
}
Now we can call updateCoords() function once to repeatedly check for new position.
updateCoords();
You can add your code inside the updateCoords() function and it will be executed each 10 milliseconds
Concept: mouseX and mouseY variables get updated on mousemove event, and also get updated when there is any change in the canvas position.
It looks like you want to refresh your mouseposition-values even if you don't move your mouse. You should try something like this:
var event = '';
var counter = 1;
$(function(e){
event = e;
window.setInterval(refresh, 10);
});
$(document).mousemove(function(e){
event = e;
refresh;
});
function refresh(){
counter++;
$('#mousepos').val("event.pageX: " + event.pageX + ", event.pageY: " + event.pageY + ", counter: " + counter)
}
The counter is just for visualisation of the refresh. You can set the interval to everything you want (10 = 10ms = 0.01s) Just move everything from your .mousemove() event into this refresh() function and call it properly and your mouse position should update even if you don't move your mouse.
Look at this fiddle for a life example: http://jsfiddle.net/82cmxw8L/1
EDIT:
Because my fiddle didn't work for the asker, i updated it: http://jsfiddle.net/82cmxw8L/8/
New is, that the mouseposition is now set every 0.1 Second, no matter what, rather than being updated only when the mouse moves.
I have a mousemove sensor that scrolls the page in the direction the mouse moves, but even though I don't move the mouse, the event calls itself because the page got scrolling so its like the mouse had moved! I just want to get the real event when the mouse moves, not the page event but the client event.
$("body")
.mousemove(function(event){
if ($("#imgc").css("display")!=="block") {
var x = Math.round( ((event.clientX - ($(window).width()/2))/($(window).width()/2)*10) *100 )/100
this.scrollLeft += (x*3);
}
In your code that calculates which way the mouse has moved, use screenX and screenY instead of whatever you're currently using. This will give mouse coordinates relative to the screen, so it shouldn't trigger repeatedly if the mouse doesn't actually move.
I am triggering a mouse event on the map from an absolutely positioned dom element that is over the map (this element follows my mouse). I want the mouseup element to trigger on the map as if the mouseup had been performed on the map directly. Most importantly, I want the latLng coordinates for the position over which the mouse button was released. Here is the relevant portion of my code (regarding the element that follows the mouse).
var mouseup = google.maps.event.addListenerOnce(_map, 'mouseup', function(event) {
placeMarker(event.latLng);
addPinClone.remove();
return bean.remove(window, "mousemove.window__temp__");
});
var addPinClone = $("<div class='map-add-pin'>").css({
opacity: .4,
position: "absolute"
}).mouseup(function(evt) {
return google.maps.event.trigger(_map, "mouseup", evt);
}).appendTo("#map");
If I click the map directly, I get event.latLng in my mouseup event. When I trigger the event from the floating element, I do not.
I tried to omit the mouseup function on addPinClone altogether, hoping the event would bubble up to the map properly, but that didn't work either.
How do I get the latLng from here?
mouseup is not a documented event on the Map class (it is on Marker, Polygon, Rectangle and Circle, i.e. things you might drag around on the map). So I'd guess it's impossible for you to trigger that event. Although interesting that anything happens at all for a normal click on the map.