<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS获得鼠标位置（兼容多浏览器ie,firefox）脚本之家修正版</title>

</head> 

<body> 

<script>

function mouseMove(ev)

{

ev= ev || window.event;

var mousePos = mouseCoords(ev);

//alert(ev.pageX);

document.getElementById("xxx").value = mousePos.x;

document.getElementById("yyy").value = mousePos.y;

} 

function mouseCoords(ev)

{

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

} 

document.onmousemove = mouseMove;

</script>

鼠标 X 轴:

<input id=xxx type=text> 

鼠标 Y 轴:

<input id=yyy type=text>

</body>

拖拽小案例

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果</title>

<style>

#div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; }

#img1 { position:absolute}

</style>

<script>

window.onload = function(){

    var oDiv = document.getElementById('div1');

    var oImg = document.getElementById('img1');  

    tqfc(oDiv);

    tqfc(oImg);  

    function tqfc(obj){

            obj.onmousedown = function(ev){

            var ev = ev || event;

            var oDivX = ev.clientX - this.offsetLeft;

            var oDivY = ev.clientY - this.offsetTop;

            obj.style.backgroundColor = 'red';  

            //加入兼容问题

            if(obj.setCapture){

                obj.setCapture();

                }  

            document.onmousemove = function(ev){  //注意这里是document

                var ev = ev || event;

                L = ev.clientX - oDivX;

                T = ev.clientY - oDivY;  

                //限制不超出可视范围

                if(L<100){  //磁性吸附重点在于这里,原本是0,改成100

                    L = 0;

                    }else if(L>document.documentElement.clientWidth - obj.offsetWidth){

                        L = document.documentElement.clientWidth - obj.offsetWidth;

                        }  

                if(T<0){

                    T = 0;

                    }else if(T>document.documentElement.clientHeight - obj.offsetHeight){

                        T = document.documentElement.clientHeight - obj.offsetHeight;

                        }  

                obj.style.left = L + 'px';

                obj.style.top = T + 'px';

                }

            return false;

            }

            obj.onmouseup = function(){

            document.onmousedown = document.onmousemove = null;

            obj.style.backgroundColor = '#7391C5';  

            //加入兼容问题

            if( obj.releaseCapture ){

                obj.releaseCapture();

                }

            }

        }  

    }

</script>

</head>

<body>

<div id="div1"></div>

<img src="标签图片/1.JPG" width="100" id="img1"/>

</body>

</html>

js 鼠标坐标的更多相关文章

  1. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  2. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  3. js鼠标及对象坐标控制属性详细解析

    对js鼠标及对象坐标控制属性进行了详细的分析介绍.  offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...

  4. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  5. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

  6. js实时显示鼠标坐标

    <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title ...

  7. JS 获取鼠标坐标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js 鼠标和键盘事件

    js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...

  9. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. LINUX下为apache 和 PHP 添加模块

    LINUX下为apache 和 PHP 添加模块https://www.path8.net/tn/archives/4717/opt/lampp/bin/httpd -V/opt/lampp/bin/ ...

  2. php中类的持久化如何实现

    php中类的持久化如何实现 一.总结 一句话总结:PHP持久化通过serialize()  和   unserialize() 这两个函数来实现的. 1.持久化之后的对象保存到哪里? 将复杂的数组之类 ...

  3. Day4下午解题报告

    预计分数:30+30+0=60 实际分数:30+30+10=70 稳有个毛线用,,又拿不出成绩来,, T1 https://www.luogu.org/problem/show?pid=T15626 ...

  4. 二维LIS（CDQ分治）

    题目描述 给定一个长度为N的序列S,S的每个元素pi是一个二元组(xi,yi),定义pi<pj当且仅当xi<xj并且yi<yj,求S的最长上升子序列长度 输入格式 第一行一个N,表示 ...

  5. String字符串操作--切割,截取,替换,查找,比较,去空格.....

    字符串拼接 直接用+号:String a = "I"; String b = "love"; String c = "you";String ...

  6. amazeui学习笔记一（开始使用2）--布局示例layouts

    amazeui学习笔记一(开始使用2)--布局示例layouts 一.总结 1.样例分析(不要忘记,优先分析这个布局示例):有教你页面怎么布局的,实例中可以分析一波 2.响应式:对应meta标签中的v ...

  7. solr/lucence和关系数据库的混合使用

    我们知道solr提供了一个DIHandler,提供将关系数据库中的数据导成索引,然后使用solr查询. 对于一个大表中关联数个小表的查询,这非常耗费时间. 我的思路是: 1. 将一个大表做成索引,使用 ...

  8. 开发板 Linux驱动视频 驱动是什么

    内存管理单元很重要. linux把设备看成文件,(open,read,write,ioctrl,close)主要写这几个函数. 哈弗结构,取指令和取数据同时进行. arm处理器体系架构以及发展方向 单 ...

  9. Chome 浏览器，您的连接不是私密连接

    网上搜索了半天,最后才发现是去广告插件/软件的原因, 关掉广告插件/者软件,或者重新导入证书, 就可以了.

  10. Vue 执行npm run dev时报了三个warning的原因

    刚装上了win10,用vue运行下项目,输入npm run dev之后报了三个以下错误: There are multiple modules with names that only differ ...