鼠标事件onmousemove的clientY

原创 2015年11月19日 22:41:45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    body{height:2000px;}
    #div1{width: 200px; height: 200px; background: red; position:absolute;}
    #div2{width:600px; height:1px; background:black; position:absolute; top:643px;}
</style>
<script>
    document.onmousemove = function(ev){
        var oEvent = ev||event;
        var oDiv = document.getElementById("div1");

        oDiv.style.left = oEvent.clientX + "px";
        oDiv.style.top = oEvent.clientY + "px";
    }
</script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

div1跟随鼠标指针移动,但是它的client无法超出可视区域的Y轴长度,再往下移动。
如图:
这里写图片描述

解决方法:

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //获取scrollTop滚动距离
oDiv.style.top = oEvent.clientY + scrollTop + "px";//clientY加上滚动距离即可。
版权声明:本文为博主原创文章,未经博主允许不得转载。

鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

转自:http://www.jb51.net/article/62088.htm 智能社_前端开发培训专家 【点击进入】 ...

Java鼠标事件

  • 2013年06月20日 01:05
  • 4KB
  • 下载

jQuery各种鼠标事件

  • 2014年01月14日 16:36
  • 2KB
  • 下载

Android查询:模拟键盘鼠标事件(adb shell 实现)

1. 发送键盘事件: 命令格式1:adb shell input keyevent “value” 其中value以及对应的key code如下表所列: KeyEvent Value ...

Java鼠标事件MouseEvent

  • 2014年06月20日 16:36
  • 3KB
  • 下载

GTK进阶学习:鼠标事件 源代码

  • 2015年01月27日 14:21
  • 5KB
  • 下载

Unity3D开发(七):NGUI之UICamera控制触摸,鼠标事件

先给论坛做个广告:点击打开链接 1. UICamera 功能介绍 主要包括UI事件的监听,分发,覆盖范围为此Camera渲染的所有GameObject。 事件源包括:鼠标,触摸,键盘,手...

javascript鼠标事件大全

  • 2009年05月18日 08:48
  • 4KB
  • 下载

Opencv图像识别从零到精通(13)----点线圆矩形与鼠标事件

图像中不可少的元素就是点、线、圆、椭圆、矩形,多边形,同时这些也是物体的特征组成单位,在图像识别中必不可少。所以要首先去认识这个元素怎么定义和使用,同时鼠标是电脑的窗口,我们很多的处理都会用到鼠标。本...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标事件onmousemove的clientY
举报原因:
原因补充:

(最多只允许输入30个字)