【杂谈】jQuery怎样猎取鼠标的位置坐标
2019-11-18杂谈搜奇网31°c
A+ A-
jq及时猎取鼠标当前位置坐标,能够经由过程jQuery event.pageX和event.pageY这两个属性要领来完成。jQuery event.pageX可用于查找相对于文档左边沿的鼠标位置,而event.pageY可用于查找相对于文档上边沿的鼠标位置。
下面我们就连系细致的代码示例,给人人引见jq猎取鼠标的位置坐标要领。
代码示例以下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jq猎取鼠标位置坐标示例</title> <style type="text/css"> *{ margin: 0; } html, body{ height:100%; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function() { $("body").mousemove(function(event){ var relPageCoords = "(" + event.pageX + "," + event.pageY + ")"; $(".mouse-cords").text(relPageCoords); }); }); </script> </head> <body> <p>当前鼠标的坐标为: <strong class="mouse-cords"></strong></p> </body> </html>
mousemove()要领示意当鼠标指针在指定的元素中挪动时,就会发作 mousemove 事宜或规定当发作 mousemove 事宜时运转的函数。(上述代码中,函数的参数event,相当于一个对象,用来供应鼠标位置信息。)
event.pageX 属性返回鼠标指针的位置,相对于文档的左边沿。event.pageY 属性返回鼠标指针的位置,相对于文档的上边沿。
text()要领设置或返回被选元素的文本内容。(这里的strong标签就是用来显现输出鼠标坐标值)
结果以下:
注:
1、event.pageX和event.pageY属性通常是一同运用的。
2、用户把鼠标挪动一个像素,就会发作一次 mousemove 事宜。处置惩罚一切 mousemove 事宜会消耗系统资源。请郑重运用该事宜。
本篇文章就是关于jq及时猎取鼠标当前位置坐标的要领引见,异常简朴易懂,愿望对须要的朋侪有所协助!
以上就是jQuery怎样猎取鼠标的位置坐标的细致内容,更多请关注ki4网别的相干文章!
标签:jq怎么获取鼠标位置