JavaScript-事件之onmousemove

onmousemove 监听鼠标移动事件。 注意,ie8及ie8以下监听不到event, 所以要用event=window.event;做一下兼容处理。 clientX/clientY获取当前鼠标在指定标签内的可见横纵坐标位置。
标签.οnmοusemοve=function(event){
//兼容处理
if(!event){
event=window.event;
}
// 或者
// event=event||window.event;
console.log("X = “+event.clientX+” Y = "+event.clientY);
}

鼠标跟随例子:
定义一个100*100 红色背景的div #test, clientX/clientY是浏览器可见的坐标, pageX/pageY是整个页面文档, 但是不兼容ie8及其以下。 所以,要兼容的话我们只能使用clientX、clientY, 如果body高于整个浏览器可见高度, 跟随的div定位, 就要减去距离顶部或者距离左侧的距离。 如下:

<div id="test" class="test">
 </div>
	  document.onmousemove=function(event){
           //解决兼容 
           event=event||window.event;
           //获取到鼠标的坐标   clientX/clientY 是相对于浏览器窗口   pageX/pageY 是整个页面文档,不兼容ie8
           // var left=event.pageX;
           // var top=event.pageY;
           var st=document.body.scrollTop||document.documentElement.scrollTop;
           var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
           var left=event.clientX;
           var top=event.clientY;
           test.style.left=left+sl+"px";
           test.style.top=top+st+"px";
         }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值