Develop Reference

Jquery mouse click event not working with certain function

I'm not that experienced in front-end but was wondering where the bug is that is making me unable to use the function down below in combination with the element.getBoundingClientRect() function:
$(document).on('click','img',function(){
alert("Click event works!");
});
I'm creating an annotation tool for multiple views of my dataset that can be seen below:
I have been able to make a zoom-in function, which makes it much easier to see where my mouse is over the image I'm trying to label. The problem is when I use this function with a click event, the click event will not work. In the function to get my mouse position:
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
a = img.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
If I replace a = img.getBoundingClientRect(); by arbitrary values, the click function will work, but with this line it will not. It would be awesome if someone could tell me why this occurs and what I can do to make both the click event and the getCursorPos() function to work.
The full code can be found here.
Thanks in advance!

I found the solution!
My click function on the image did not work because of my move lens function which placed a CSS element behind my mouse and in front of my image. By replacing the selector in the click function to the selector of the lens and not the image, my function finally worked. Thank you all for trying to help me.

How to get exact position canvas in chrome for android?

I use a tag canvas 1:1 with screen . i tried get position x,y when click 1 point in canvas:
var bRect = theCanvas.getBoundingClientRect();
var mouseX = (evt.clientX - bRect.left)*(theCanvas.width/bRect.width);
var mouseY = (evt.clientY - bRect.top)*(theCanvas.height/bRect.height);
It work fine in Chrome, IE , safari in iOS but it is so wrong so much in chrome for Android. How to fix it across all browser?

Cross-browser solution for replacing the use of event.layerX and event.layerY

I'm trying to adapt some code from a simple app that uses Raphael to allow users to draw circles and rectangles on a canvas. (original code at https://gist.github.com/673186)
The original code used an older version of jQuery and worked fine. See http://jsfiddle.net/GHZSd/
Using an updated version of jQuery, however, breaks the example. See http://jsfiddle.net/GHZSd/1/
The reason for this is that event.layerX and event.layerY are no longer defined in the new version of jQuery. My question is - what code I can use to replace those values? I've tried a couple things just by doing some math (event.originalEvent.layerX/layerX still exist for now so I'm just trying to add/subtract some stuff that will result in those values) but so far what works on one browser doesn't work on all of them.
Sorry if this has been asked before but I wasn't able to find a concrete answer on Stack Overflow or anywhere else.

So, i thought a little about this problem, since the Chrome team wants to remove layerX and layerY for strange reasons.
First, we need the position of your container :
var position = $paper.offset();
(for those reading without the fiddle opened, $paper is the div where the svg will be drawn)
It gives us two coords, position.top and position.left, so we know where in the page is the container.
Then, on click, we use e.pageX and e.pageY, which are the coords of the page. To emulate layerX and layerY, we use (e.pageX - position.left) and (e.pageY - position.top)
Et voilà : http://jsfiddle.net/GHZSd/30/
Works on chrome, Safari, FF and Opera.

const bbox = e.target.getBoundingClientRect();
const x = e.clientX - bbox.left;
const y = e.clientY - bbox.top;

Mouse coordinates on Canvas without Jquery

I am currently using:
e.pageX - $("#canvas").offset().left
This is the only thing I am using Jquery for, so I would prefer to re-write this using just javascript.
What can I use to replace this?

The answer provided by N Rohler works well only in Internet Explorer (with some bugs prior to IE8 - but I guess it won't be a problem for you since you're using a canvas and pageX), and in Opera if the padding is 0, and in Safari/Chrome if the border width is 0 too. In Firefox, unfortunately, offsetX and offsetY are undefined.
http://www.quirksmode.org/dom/w3c_cssom.html#mousepos
Kaninepete, I think you should reconsider, for the sake of simplicity, the way of getting the mouse coordinates relatively to your canvas element. All you have to do is to calculate the position of the canvas, which is a pretty simple task using .getBoundingClientRect() (also, don't forget to add scroll offsets if necessary), and subtract it from pageX and pageY.

var x = e.offsetX,
y = e.offsetY;
Updated (again) for (correct) Firefox compatibility:
var rect = e.target.getBoundingClientRect();
var x = e.offsetX || e.pageX - rect.left - window.scrollX,
y = e.offsetY || e.pageY - rect.top - window.scrollY;

You can replace it by the below code
<canvas onmouseDown="mouseDown(event)" width="500" height="500"></canvas>
function mouseDown(e)
{
var x=e.clientX-canvas.offsetLeft;
var y=e.clientY-canvas.offsetTop;
}

HTML5/Canvas Mouse Position off when placed in actual Site

I'm capturing mouse position like this
mouse_move: function(e)
{
mousePos.x = e.pageX - vr.o.context.canvas.offsetLeft;
mousePos.y = e.pageY - vr.o.context.canvas.offsetTop;
},
and it has worked like a dream in all modern browsers while in development, Even tested Wrapping the <canvas/> in a basic dom structure to make sure mouse position adjusted...
obviously now I'm putting it in the actual site it's not working...
You can see here http://jondavidjohn.com/projects/
the mouse position ends up quite a ways south of the actual cursor, anything specifically that could be causing this?
SOLUTION
mouse_move: function(e)
{
mousePos.x = e.offsetX;
mousePos.y = e.offsetY;
},

COPIED FROM: http://simonsarris.com/blog/510-making-html5-canvas-useful
Getting mouse coordinates on Canvas
Getting good mouse coordinates is a little tricky on Canvas. You could use offsetX/Y and LayerX/Y, but LayerX/Y is deprecated in webkit (Chrome and Safari) and Firefox does not have offsetX/Y.
The most bulletproof way to get the correct mouse position is shown below. You have to walk up the tree adding the offsets together. Then you must add any padding or border to the offset. Finally, to fix coordinate problems when you have fixed-position elements on the page (like the wordpress admin bar or a stumbleupon bar) you must add the ’s offsetTop and offsetLeft.
Then you simply subtract that offset from the e.pageX/Y values and you’ll get perfect coordinates in almost every possible situation.
// Creates an object with x and y defined,
// set to the mouse position relative to the state's canvas
// If you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
CanvasState.prototype.getMouse = function(e) {
var element = this.canvas, offsetX = 0, offsetY = 0, mx, my;
// Compute the total offset
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
// Add padding and border style widths to offset
// Also add the <html> offsets in case there's a position:fixed bar
offsetX += this.stylePaddingLeft + this.styleBorderLeft + this.htmlLeft;
offsetY += this.stylePaddingTop + this.styleBorderTop + this.htmlTop;
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
// We return a simple javascript object (a hash) with x and y defined
return {x: mx, y: my};
}

Use e.offsetX and e.offsetY for now instead.
It actually gets more complicated when you introduce some other things, like margins and padding, but offsetX and offsetY will be much more accurate than what you've got to say the least.
I don't have my new "bulletproof-works-in-every-situation" mouse code on me right now, I can get that later for you if you think you'll need it.
edit: Derp! Thanks chopperdave for finally providing the code I forgot to add!