Menu
I am trying to get the relative coordinates of the mouse in an element in React using jQuery.
My code doesn't seem to be working and there are no console errors.
code:
index.html
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="stylesheets.css" > <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="ja.js" type="text/javascript"></script> <title>Where's Waldo</title> </head> <div id="root"></div> </body> </html> ja.js (jQuery function)
jQuery(function($) { var x,y; $("#waldo1").mousemove(function(event) { var offset = $(this).offset(); x = event.pageX- offset.left; y = event.pageY- offset.top; $("#coords").html("(X: "+x+", Y: "+y+")"); }); }); component
import React, { Component } from 'react' import Timer from './timer' class Level1 extends Component { render () { return ( <div> <div id="gameBoard"> <img id="waldo1" src={require('../images/waldo1(1).jpg')} alt="waldo"/> </div> <h2 id="coords"></h2> <Timer start={Date.now()}/> </div> ) // return } // render } //component export default Level1 I hear jQuery doen't play nice with react. Is my syntax correct or is there a better way entirely?
Thank you.
836
You can get full control of cursor position by event. target. selectionStart and event. target.
The main limitation of using jQuery in React is that jQuery manually updates the DOM. On the other hand, React has its system for making changes to the DOM. It internally determines when a React app or component should re-render. It also figures out which parts of the UI need to be updated.
Use event. clientY to get the mouse position relative to the browser viewport (Compatibility table).
As others have mentioned, the issue is that react has not rendered your component to the DOM when jQuery tries to attach the event listener.
You don't need jQuery to do this at all, a better approach is to use the React events:
class Application extends React.Component { constructor(props) { super(props); this.state = { x: 0, y: 0 }; } _onMouseMove(e) { this.setState({ x: e.screenX, y: e.screenY }); } render() { const { x, y } = this.state; return <div onMouseMove={this._onMouseMove.bind(this)}> <h1>Mouse coordinates: { x } { y }</h1> </div>; } } Example pen: https://codepen.io/CarlosEME/pen/XWWpVMp
75
You can try this:
import React, { Component } from "react"; class ClassCursorPosition extends Component { constructor(props) { super(props); this.state = { x: 0, y: 0 }; } logMousePosition = e => { this.setState({ x: e.clientX, y: e.clientY }); }; componentDidMount() { window.addEventListener("mousemove", this.logMousePosition); } render() { return ( <div> X- {this.state.x} Y - {this.state.y} </div> ); } } Actually there are three things you can consider, here I mention clientX, clientY you can search for pageX, pageY and secrrenX, screenY as well.
pageX, pageY => depends on mouse position according to page.( scrollable page)
screenX, screenY => depends on mouse position according to screen ( height and width of different screens)
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
