js 获得鼠标的坐标

最新推荐文章于 2024-08-13 16:33:17 发布
最新推荐文章于 2024-08-13 16:33:17 发布
阅读量98 收藏
点赞数
分类专栏： Js 文章标签： json javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_11864/article/details/82126969
版权
event.clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
event.clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
一般用event.clientX 和event.clientY的比较多！
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">

function bijiao(name){
var json = {'username' : 'aa', 'password' : 'bb','age':'5'};
var json1 = {'username' : 'aa1', 'password' : 'bb','age':'6'};
var map = new Array();

//for(var i=0;i<json.length;i++){
for(var key in json){
//alert(key+':'+json[key]);
for(var key1 in json1){
if(name == key){
if(key == key1){
if(json[key] == json1[key1]){
//alert(key+"===" + key1+ "属性值相同");
return "";
}else{
//alert(key+"===" + key1+ "属性值不同");
return json1[key1];
}
}}
}
}
//}

}
//alert(json.username);
//map.put();
function aa(obj,flag,iwidth){
var oldvalue = bijiao(obj.name)
if( oldvalue!= ''){
var my_tips=document.all.mytips;
//var my_tips = document.getElementById("myadiv");
my_tips.innerHTML = oldvalue;
my_tips.style.display="";
my_tips.style.width=iwidth;
my_tips.style.left=event.clientX+120+document.body.scrollLeft;
my_tips.style.top=document.body.scrollTop+event.clientY
if(!flag){
my_tips.style.display="none";
}
}else{
}
}
</script>
<BODY>

<form>
<div style="width: 999px; height: auto; border-left: solid 1px #bae1f8; border-right: solid 1px #bae1f8;
overflow: hidden;">
<!--不能去掉-->
<div class="patentindex" id="mytips" style="border-right: gray 1px solid; border-top: gray 1px solid;
display: none; filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
left: 0px; border-left: gray 1px solid; border-bottom: gray 1px solid; position: absolute;
background-color: #ffffff; text-align: left;">
<!---->
</div>
用户名：<input type="text" id="username" name="username" οnmοusemοve="aa(this,1,200)" οnmοuseοut="aa(this,0,200)"/><br>
密码：<input type="text" id="password" name="password" οnmοusemοve="aa(this,1,200)" οnmοuseοut="aa(this,0,200)"/></br>
年龄：<input type="text" id="age" name="age" οnmοusemοve="aa(this,1,200)" οnmοuseοut="aa(this,0,200)"/>
</form>
</BODY>
</HTML>
例子2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">

function bijiao(name){
var json = {'username' : 'aa', 'password' : 'bb','age':'5'};
var json1 = {'username' : 'aa1', 'password' : 'bb','age':'6'};
var map = new Array();

//for(var i=0;i<json.length;i++){
for(var key in json){
//alert(key+':'+json[key]);
for(var key1 in json1){
if(name == key){
if(key == key1){
if(json[key] == json1[key1]){
//alert(key+"===" + key1+ "属性值相同");
return "";
}else{
//alert(key+"===" + key1+ "属性值不同");
return json1[key1];
}
}}
}
}
//}

}
//alert(json.username);
//map.put();
function aa(obj,flag,iwidth){

var top = obj.offsetTop;
var left = obj.offsetLeft;
var objWidth = obj.offsetWidth;
var objHeight = obj.offsetHeight;
var oldvalue = bijiao(obj.name)

if( oldvalue!= ''){
var my_tips=document.all.mytips;
//var my_tips = document.getElementById("myadiv");
my_tips.innerHTML = oldvalue;
my_tips.style.display="";
my_tips.style.width=iwidth;
//my_tips.style.left=event.clientX+120+document.body.scrollLeft;
//my_tips.style.top=document.body.scrollTop+event.clientY -26
my_tips.style.left = left + objWidth;
my_tips.style.top=top;
if(!flag){
my_tips.style.display="none";
}
}else{
}
}
</script>
<BODY>

<form>
<div style="width: 999px; height: auto; border-left: solid 1px #bae1f8; border-right: solid 1px #bae1f8;
overflow: hidden;">
<!--不能去掉-->
<div class="patentindex" id="mytips" style="border-right: gray 1px solid; border-top: gray 1px solid;
display: none; filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
left: 0px; border-left: gray 1px solid; border-bottom: gray 1px solid; position: absolute;
background-color: #ffffff; text-align: left;">
<!---->
</div>
用户名：<input type="text" id="username" name="username" οnmοusemοve="aa(this,1,200)" οnmοuseοut="aa(this,0,200)"/><br>
密码：<input type="text" id="password" name="password" οnmοusemοve="aa(this,1,200)" οnmοuseοut="aa(this,0,200)"/></br>
年龄：<input type="text" id="age" name="age" οnmοusemοve="aa(this,1,200)" οnmοuseοut="aa(this,0,200)"/>
</form>
</BODY>
</HTML>
iteye_11864
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS获取鼠标坐标的实例方法
10-27
本文将为大家介绍JS获取鼠标坐标的实例方法，该方法可以通过JavaScript代码来获取鼠标的当前坐标位置，并且适用于多种浏览器环境中。 JS获取鼠标坐标的原理 在JavaScript中，我们可以通过事件对象的clientX和...
js获得鼠标的坐标值的方法
10-27
总结来说，获取鼠标坐标值是JavaScript中常用的功能，主要通过`event.clientX`和`event.clientY`来实现。通过理解如何结合`offsetLeft`、`offsetTop`以及滚动条信息，我们可以获取到鼠标相对于任意元素的坐标值，这...
获得鼠标的坐标值
nqxcwl的专栏
11-08 338
一、需求： 1、当需求为获得的坐标值相对于body时实现方法 2、当需求为获得的坐标值相对于某一对象时实现方法 二、实现： var x , y; //当需求为获得的坐标值相对于body时，用...
javascript的event事件与获取鼠标光标
菜菜鸟_黑马的专栏
03-26 3573
javascript的event事件与获取鼠标光标- -                                       javascript的event事件与获取鼠标光标javascript的event事件与获取鼠标光标     var canmove=false; var leftX=0,topY=0,newX=0,newY=0;        function sho
js获取当前鼠标位置并输出
热门推荐
Fly的博客
08-14 1万+
js获取当前鼠标位置并输出 1.html &lt;body onmousemove="mousemove(event)"&gt;&lt;/body&gt; 2.css html, body { width: 100%; height: 100%; background: #A5CEDB; position: relative; } .newDiv { position: a...
获取鼠标位置坐标
clh386的博客
11-21 4818
如何实现鼠标移动，实时显示光标的位置？ 关于获取鼠标位置坐标有三种方法： 1.客户区坐标位置 事件对象的clientX和clientY这两个属性保存着这个位置的信息，所有浏览器都支持这两个属性。//客户区坐标位置 /*div.onmousemove=function(event){ //alert("qwe"); var xzb=event.clientX; var y
js获取鼠标的坐标
xuehu837769474的博客
08-22 3533
1、JavaScript实现 X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /> function mousePosition ( ev ) { if ( ev.pageX || ev.pageY ) { return { x : ev.pa...
js获取鼠标坐标的方法
weixin_45817492的博客
04-01 1万+
js获取鼠标坐标的方法
JavaScript获取鼠标的坐标
weixin_43228946的博客
08-19 239
JavaScript获取鼠标的坐标
html5 js获取鼠标坐标,JavaScript取得鼠标绝对位置程序代码介绍
weixin_28683165的博客
06-02 413
首先不同浏览器中event位置属性的分析:1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离)2. Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离)3. event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离)4. IE的event.offsetX,event.o...
JS获取鼠标坐标位置实例分析
10-22
主要介绍了JS获取鼠标坐标位置的方法,结合实例形式分析了JavaScript常见的获取鼠标页面、屏幕等坐标位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript获取当前鼠标坐标的方法
12-09
本文实例讲述了javascript获取当前鼠标坐标的方法。分享给大家供大家参考。具体实现方法如下： 对于javascript获取当前鼠标坐标来说，得对不同浏览器的坐标位置有所了解。具体代码如下： 代码如下:<html> &lt...
JavaScript实现捕获鼠标坐标
10-15
总结起来，捕获JavaScript鼠标坐标的关键在于： 1. 使用`onmousemove`事件监听器。 2. 获取`event`对象并处理兼容性问题。 3. 从`event`对象中获取`clientX`和`clientY`属性，它们表示鼠标相对于视口的坐标。 4. ...
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 170
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
评论如何批量获取，如何获得回复评论，大家相互交流
lfsysc的博客
08-13 459
print(f'\t{count}{recom_addr}【{recom_user}】回复说："re{recom_text}"')print(f'{com_addr}【{com_user}】说："{com_text}"有{com_repl}回复：')
(自用)交互协议设计——protobuf序列化
weixin_44155149的博客
08-11 434
protobuf是一种比json和xml等序列化工具更加轻量和高效的，性能比json和xml真的强很多，毕竟google出品。
libcurl8.9.1 上传json
最新发布
sz76211822的专栏
08-13 171
在postman中 PUT----》body----》raw----》json。
express如何使用websocket进行实时通讯
qq_55491577的博客
08-12 206
express如何使用websocket进行实时通讯；这边我是用的es6导入语法，可以在package.json中设置"type": "module"
jsonpath--数据提权
金灰的博客
08-08 245
jsonpath模块。jsonpath取值。
使用js监听鼠标坐标并修改鼠标坐标
03-30
需要使用以下代码： ```javascript document.addEventListener('mousemove', function(event) { var x = event.clientX; // 获取鼠标在文档中的横坐标 var y = event.clientY; // 获取鼠标在文档中的纵坐标 // 修改鼠标坐标，例如将横坐标加上10，纵坐标减去5 x += 10; y -= 5; // 根据修改后的坐标，设置鼠标的位置 var cursor = document.getElementById('custom-cursor'); // 获取自定义的鼠标元素 cursor.style.left = x + 'px'; cursor.style.top = y + 'px'; }); ``` 上面的代码中，我们使用`document.addEventListener`方法监听`mousemove`事件，当鼠标在文档中移动时，会触发回调函数中的代码。在回调函数中，我们通过`event.clientX`和`event.clientY`获取鼠标在文档中的横纵坐标，然后对坐标进行修改。最后，我们再根据修改后的坐标设置自定义鼠标元素的位置。 需要注意的是，如果要修改鼠标的位置，必须要使用自定义的鼠标元素，而不能直接修改浏览器默认的鼠标样式。在代码中，我们使用了一个`cursor`变量来获取自定义的鼠标元素，如果你还没有创建这个元素，可以使用以下代码： ```javascript var cursor = document.createElement('div'); cursor.id = 'custom-cursor'; cursor.style.position = 'fixed'; cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.borderRadius = '50%'; cursor.style.backgroundColor = 'red'; cursor.style.pointerEvents = 'none'; document.body.appendChild(cursor); ``` 这段代码会创建一个红色的圆形元素作为自定义鼠标，你可以根据自己的需要修改它的样式。最后，别忘了将自定义鼠标元素添加到文档中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值