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.
Related
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
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.
How can I apply a click at a specific position in a canvas? (using coordinates seems the most logical to me, but can't find any way to do it, any other idea is welcomed). Note that I do not have access to the code that creates the canvas.
EDIT: Some clarification, the canvas has multiple elements being drawn that i can't select with jquery but need to click them. I could find their coordinates manually and do some calculations, but every time i try to pass a click or mouse event into that position is not being taken as a real mouse click (the button that should be clicked, is not).
How about trying
canvas.on('click', function(e) {
// calculate x y coordinates on canvas
var x = e.pageX - $(this).offset().left,
y = e.pageY - $(this).offset().top;
// implement collision detection via the coordinates the element you want to click (assuming you know where it is)
if (y > <elementY> && y < <elementY> + <elementHeight>
&& x > <elementX> && x < <elementX> + <elementWidth>) {
alert('found it');
}
});
I have no time testing that snippet. If you know the x and y coordinates of your elements within your canvas, that code might just do the trick.
What I tried to do with that snippet is to simulate a bounding box via elmentY and elementY + elementHeight as well as elementX and elementX + elementWidth. If you know all those values, you can simply check whether the x and y values of your click event fall in that said box.
Edit
If you want to trigger a click event at a certain position, define the clickEvent beforehand and set the pageX and pageY attributes.
var e = new jQuery.Event("click");
e.pageX = 10;
e.pageY = 10;
$(<canvas>).trigger(e);
You might have to include the offset of your canvas in the calculations as well.
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?
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