<html>

<head>

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

<title>javascript获得鼠标位置</title>

</head>

<body>

<div id="lijj"  style="width:500px;height:500px;background:#000;">

</div>

<script>

function mouseMove(ev)

{

    Ev= ev || window.event;

    var mousePos = mouseCoords(ev);

    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.getElementById('lijj').onclick = mouseMove; 

</script>

鼠标X轴:

<input id=xxx type=text>

鼠标Y轴:

<input id=yyy type=text>

</body>

js 获取鼠标位置坐标的更多相关文章

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

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

  2. js获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

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

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

  4. JS获取鼠标位置，兼容IE FF

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

  5. js 获取鼠标的手势方向角度

    需要获取鼠标的移动角度 1.mousedown 确定起始点 2.mousemove 确立相关点 3.先计算两点的斜率,然后根据三角函数和反三角函数.转换为角度 <!DOCTYPE html> ...

  6. JS获取鼠标左（右）滑事件

    鼠标左(右)滑也是网站开发中常见的效果之一,这里对鼠标左(右)滑做出一些解释. 首先要获取需要左右滑事件的节点: eg: var div=document.getElementById("d ...

  7. js获取鼠标的位置

    <!doctype html><html><head><meta charset="utf-8"><title>获取鼠标 ...

  8. JS 获取鼠标坐标

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

  9. js获取鼠标当前的位置

    有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位 ...

随机推荐

  1. 【贪心】【模拟】HDU 5491 The Next (2015 ACM/ICPC Asia Regional Hefei Online)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5491 题目大意: 一个数D(0<=D<231),求比D大的第一个满足:二进制下1个个数在 ...

  2. Remove Duplicates from Sorted Array II ——LeetCode

    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...

  3. Java多线程Thread.yield()，thread.join()， Thread.sleep(200），Object.wait(),Object.notify(),Object.notifyAll()的区别

    Thread.yield(),在某个线程里调用Thread.yield(),会使这个线程由正在运行的running状态转变为等待cpu时间片的runable状态.join()是Thread类的一个非s ...

  4. WdatePicker 控制选择范围

    1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架 ...

  5. Java 流的概述及操作（转）

    一.什么是流? 流就是字节序列的抽象概念,能被连续读取数据的数据源和能被连续写入数据的接收端就是流,流机制是Java及C++中的一个重要机制,通过流我们可以自由地控制文件.内存.IO设备等数据的流向. ...

  6. random.sample

    import random k = random.sample(xrange(0x41, 0x5b), 26) print k import random k = random.sample(xran ...

  7. J2EE之WebLogic Server

    WebLogic是用于开发.集成.部署和管理大型分布式Web应用. 网络应用和数据库应 用的Java应用server. 将Java的动态功能和Java Enterprise标准的安全性引入大型网络应用 ...

  8. linux下显卡信息的查看

    lspci  | grep -i vga 这样就可以显示机器上的显卡信息,比如 [root@localhost conf]# lspci | grep -i vga01:00.0 VGA compat ...

  9. python-property、docstring--笔记

    已经有人总结的非常详细,而且写得不错,就直接贴过来用了 property作为装饰器函数,负责把一个方法变成属性调用的 廖雪峰关于property的讲解 http://www.liaoxuefeng.c ...

  10. 刚入门的easyui

    这两天看了下easyui的教学先说说自己的一些小小理解吧! ----在使用easyui中也遇到了一个问题 : Uncaught TypeError:cannot call method ‘offset ...