Js和JQuery获取鼠标指针坐标的实现代码分享


Posted in Javascript onMay 25, 2015
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title>jquery 获取鼠标指针的坐标</title>
<script>
//普通js函数
function test(event) {
 event = event || window.event;
 var x = event.offsetX || event.layerX;
 var y = event.offsetY || event.layerY;
 alert("x="+x+"; y="+y);
 }
//jquery函数
$(function(){
 $("#t").mouseover(
 function(event){
  event = event || window.event; 
  var x = event.offsetX || event.originalEvent.layerX;
  var y = event.offsetY || event.originalEvent.layerY;
  alert("x:"+x+"; y:"+y);
 }
 );
 });
</script>

</head>

<body>
<div id="t" style="float:left;background-color: green;width: 300px;height: 60px;">测试鼠标位置(jquery函数处理)</div>
<div id="s" onmouseover="test(event)" style="float:left;background-color: red;width: 300px;height: 60px;margin-left:10px;">测试鼠标位置(普通js函数处理)</div>

</body>
</html>
Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
Javascript实现飞动广告效果的方法
May 25 #Javascript
javascript自定义右键弹出菜单实现方法
May 25 #Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 #Javascript
JavaScript实现仿网易通行证表单验证
May 25 #Javascript
js+cookies实现悬浮购物车的方法
May 25 #Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 #Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
php 文件上传系统手记
2009/10/26 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
javascript常见用法总结
2014/05/22 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
python中xrange用法分析
2015/04/15 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
致跳远、跳高运动员广播稿
2014/01/09 职场文书
大专生自荐书范文
2014/06/22 职场文书
监护人证明
2015/06/19 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2016年春节问候语
2015/11/11 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
创业计划书之校园超市
2019/09/12 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang