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 track the position of the mouse on X-axis in JavaScript?

I want to know how to track the position of the mouse on X-axis on the screen. Based on limited knowledge of Java/Processing, it is something similar to mouseX in Java. In addition, I want to rotate an image element based on the position of the mouse on X-axis. It would be nice to receive some pieces of advice.

Track the mouse position in the X axis is done with an eventListener (the mousemove event)
This listener uses a callback function which should change the transform (rotate) css property of your element.
// DOM accessor to your HTML element
const rotatingE = document.getElementById('my-rotating-el')
// Event Listener
document.addEventListener('mousemove', e => {
// Callback function
const mX = e.clientX / window.innerWidth * 360
rotatingE.style.transform = 'rotate('+ mX +'deg)'
})
I've made a quick example here

a popular library/framework that is similar to Processing is P5.js (developed by the same people but for javascript) which can handle this for you
but in vanilla javascript, you would need an event listener
var mouse = {
x: undefined,
y:undefined
};
window.addEventListener("mousemove", function(event) {
mouse.x = event.x;
mouse.y = event.y;
});
what this does is listens for a mouse movement, and then records it to an object
then to take the mouseX position you can write
var mouseX = mouse.x;
or you can directly take it from
mouse.x;
//still the same

How to re-position element on 'enddrag'?

I was wondering how you would be able to use the 'enddrop' event listener to change the position of an element.
I tried using this:
document.addEventListener('dragend', e => {
e.target.style.left = e.clientX;
e.target.style.top = e.clientY;
});
This works, but it's looks un-natural because the coordinates of the upper-left of the element are changed to the mouse position. So, if the user drags the element by the upper-left point it will work perfectly, but if you drag anywhere else on the element, it gives it a snappy effect because the upper-left corner will snap to the mouse's position.
Thanks!

I recently solved a similar problem:
follow the link: Prevent drop event when it's already have child element ? Drag and Drop
at the moment you start drag(dragstart) you calculate the top and left offset based on the element and mouse position
and at the end drag(dragend) event you use this offset to adapt as needed.
let offset = [0, 0] // initial state offset x, y
function dragStart(ev) {
// your code..
offsetX = ev.target.offsetLeft - ev.clientX
ev.target.offsetLeft - ev.clientX,
ev.target.offsetTop - ev.clientY
]
}
Any doubt put the code that I can help you.
Hope this helps.

Determine the left offset of a click using jQuery

Say you have an image that is 200px wide. Is there a way to determine how far from the left of the image you clicked? For example if you clicked in the dead center you would get 100. I tried using something like ui.position.left but couldn't get that to work. Any ideas?

First, get the X position of the image. Next, use the event information to get the X position of the click event.
Once you have those two, it's simple math to get the result:
$('#yourImg').click(function(e){
var imageLeft = $(this).offset().left;
var clickLeft = e.pageX;
var howFarFromLeft = clickLeft - imageLeft;
});

You need to find the mouse coordinates at the time of the click (by using the event of the click, event.pageX, event.pageY). Then find the location of the image in the body. and subtract it from the mouseposition..
The result would be the coordinates inside the image.. Demo

SVG mouse pointer location

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).