score:0
Accepted answer
@cbroe is correct, clientx and clienty is relative to viewport. what you can do is subtract it from the element's viewport x & y so you get the proper coordinates relative to the element's x & y
for example, if the element's x is 200px
and the click is 245px
, both relative to viewport, if you compute 245px - 200px
you get 45px
which is relative to the element because you got rid of the element's x from the click's x.
const mousedown = (event: any) => {
const x = event.clientx - event.currenttarget.getboundingclientrect().left
const y = event.clienty - event.currenttarget.getboundingclientrect().top
set_last_mousex(x);
set_last_mousey(y);
setmousedown(true);
};
//...
const mousemove = (event: any) => {
const x = event.clientx - event.currenttarget.getboundingclientrect().left
const y = event.clienty - event.currenttarget.getboundingclientrect().top
set_mousex(x);
set_mousey(y);
visualrect();
};
getboundingclientrect
: https://developer.mozilla.org/en-us/docs/web/api/element/getboundingclientrect
Source: stackoverflow.com
Related Query
- Parent container margin effecting the child margin
- Make child of Material UI Grid item stretch to fit the remaining height of the parent container
- How can I import data from the child container to the parent container in react?
- How do I simulate clicking a child Tab and call the onClick handler that is defined in the Parent container using Jest?
- How do I access refs of a child component in the parent component
- What is the correct order of execution of useEffect in React parent and child components?
- In React, is it a good practice to pass all the props from parent to child component?
- ReactJS: Control a child state from the child and the parent
- React - Get the ref present in child component in the parent component
- Unit test: simulate the click event of child component in parent using enzyme
- How does React re-use child components / keep the state of child components when re-rendering the parent component?
- React/js onClick on both the Parent div and Child div. Parent always fires
- Should the parent or child component fetch data in React?
- Use React Portal to render a child into a DOM node of the parent component
- Is parent component re-rendered when the child component returns with something new?
- React Native Vector Icons to fit the parent container without specifying a size prop (Expo)
- How to use the state of the child component in the parent component?
- Passing API data from parent container to child component in React
- The children of a flex container exceed the parent
- Delay parent component render till all the child components render reactjs
- Directly modify parent props from the child in react
- React - does a child component re-mount each time the parent component renders?
- How is an argument for a callback in React being passed from the child component to the parent component?
- Is there a way to make the parent Link exclude some child elements?
- How to change the background color of a parent component from inside a child component in react, gatsby
- How to get the ref of a child component inside parent component in ReactJS
- How do I get the Age data from child to parent component
- Prevent child's state from reset after parent component state changes also get the values of all child components:ReactJS+ Typescript
- Why is rendering the parent component and the child trying to enter the child component
- How to make an http call in parent component to setState and then send the state to all child components?
More Query from same tag
- Problems facing whenever I add a filter function in react app
- Error: Actions must be plain objects. Use custom middleware for async actions, in a delete button?
- Socket io.on many namespaces path
- Not able to connect AdSense to Gatsby blog
- create-react-app with sass not loading styles
- How to make such an option map not JSX?
- How to send url params from react to express api call
- list elements are not rendered in react
- React testing - How can I mock or inject data in the store to be provided as props to component
- First Item of fetched dropdown data in React doesn't get posted
- Passing associative array as props not working
- React Cookies in Server Side Rendering (Node/Express)
- Why are my React components not re-rendering on setState()?
- Send a value from one component to another in react
- Next.js dynamic route - 404 on page reload after added SLUG
- setState callback not waiting state to update
- Cannot get a data on the table using react js
- react-router location did not match any routes during first load page
- React Custom Hook not triggering DOM updates
- How to wrap a react node by another node inside a react component
- Unable to modify component props from React DevTools for Chrome
- reactjs input element loses focus after keystroke
- Overflow of Items inside box component
- How to make an icon spin in React
- How to stop rerendering of child component when parent rerenders
- setState return NULL in React and Node Js
- the command yarn run build throw errors
- Iterating & Rendering SVG in loop
- Load javascript state from rendered elements
- Adding sort icon in react