在React和jQuery中获取鼠标坐标
我正在尝试使用jQuery在元素中获取鼠标的相对坐标。
我的代码似乎无法正常运行，并且没有控制台错误。
码：
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函数）
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+")");
});
});
零件
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
我听说jQuery在反应方面表现不佳。我的语法正确还是完全有更好的方法？
谢谢。
问题答案：
正如其他人提到的那样，问题是当jQuery尝试附加事件侦听器时，react尚未将您的组件呈现给DOM。
您根本不需要jQuery来执行此操作，更好的方法是使用React事件：
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>;
}
}
笔示例：https :
//codepen.io/CarlosEME/pen/XWWpVMp
-
问题内容： 斯威夫特新手。 我在执行一项琐碎的任务时遇到了麻烦。我要做的就是 按需 获取鼠标光标的x，y坐标。我宁可 不要 等到鼠标移动事件触发后再抓住指针的坐标。 将不胜感激！ 问题答案： 您应该看看NSEvent方法mouseLocation 编辑/更新： Xcode 11•Swift 5.1 如果您希望在应用程序处于活动状态时监视任何窗口上的事件，则可以添加与mouseMoved掩码匹配的L
-
问题内容： JFreeChart中是否有一种方法可以从ChartMouseEvent中确定鼠标悬停在绘图空间中的x，y坐标？我尝试使用域十字线值，但这似乎不准确并且滞后于实际的鼠标事件。 谢谢， 杰夫 问题答案： 鼠标坐标相对于ChartPanel，因此您需要对其进行转换：
-
本文向大家介绍使用js获取鼠标坐标相关面试题，主要包含被问及使用js获取鼠标坐标时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍python点击鼠标获取坐标（Graphics），包括了python点击鼠标获取坐标（Graphics）的使用技巧和注意事项，需要的朋友参考一下 使用Python进行图像编程，要使用到Graphics库。下面列举出较常用的代码 接下来使用Graphics库进行编写 出现下面问题：name '_name_'is not defined.出现原因是下划线应该是两个（__'name'__）
-
问题内容： 有没有一种方法可以在jQuery中获取鼠标滚轮事件（而不是谈论事件）？ 问题答案：
-
本文向大家介绍java获取鼠标在屏幕上坐标的方法，包括了java获取鼠标在屏幕上坐标的方法的使用技巧和注意事项，需要的朋友参考一下 介绍 java作为目前最为流行的计算机开发语言之一，学习java是高薪就业的好选择，本文介绍的这个小工具主要是使用MouseInfo类实时获取鼠标的信息，然后再JDialog上显示出来。希望下面的内容介绍，能够让大家对于如何获取鼠标在屏幕上的坐标更加了解，一起来学习下