I have a graphic chart that has some dots in it. These dots may locate in one place. I need to process click on two or more elements in the same spot. Is there any simple ways to do that in Vue 3?
I tried using refs and passing them to handleClick function so I can see which elements was clicked. But only higher element is responding to click.
2
Answers
try to use document.elementsFromPoint(x,y).
it will return every elements on that position.
If you pass the click event to a function, you have x, y axis position of the click.
You can use this position to locate other dots and use javascript to click the element.
You can use getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Alternate:
On a click, if a dot is hit.
Save the position of the click, and change the z-index of the object.
Perform another click on the same position with the x, y axis from click event, now hitting the new element on top.
Continue doing this, until the click event no longer is hitting dots.
For more context, reveal some code 😉