search

Home >Web Front-end >Front-end Q&A >How does jquery know where the mouse stays?

How does jquery know where the mouse stays?

青灯夜游
青灯夜游Original
2022-05-23 16:49:431830browse

Method: 1. Use the "$(document).mousemove(function(e){})" statement to add the mouse movement event on the web page, and set the processing function; 2. In the processing function, use " e.pageX" and "e.pageY" statements can dynamically obtain the X and Y axis coordinates of the mouse rest position.

How does jquery know where the mouse stays?

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

In jquery, you can get the position where the mouse stays through the "pageX" and "pageY" attributes.

  • The pageX property is the position of the mouse pointer, relative to the left edge of the document.

  • The pageY property is the position of the mouse pointer, relative to the top edge of the document.

That is: the value that will be returned is the position of the mouse on the X-axis and Y-axis.

However, simply using the "pageX" and "pageY" attributes to obtain static positions can be used with mousemove() to obtain dynamic coordinates.

Example: 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(document).mousemove(function(e) {
					$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
				});
			});
		</script>
	</head>
	<body>
		<p>鼠标指针位于： <span></span></p>
	</body>
</html>

How does jquery know where the mouse stays?

[Recommended learning: jQuery video tutorial, web front-end video 】

The above is the detailed content of How does jquery know where the mouse stays?. For more information, please follow other related articles on the PHP Chinese website!

jquery 指针 function 事件
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to add style in jqueryNext article：How to add style in jquery

Related articles

See more