skip to Main Content

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


  1. try to use document.elementsFromPoint(x,y).
    it will return every elements on that position.

    Login or Signup to reply.
  2. 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 😉

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search