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 相关文章推荐
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
PHP的宝库目录--PEAR
2006/10/09 PHP
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
python ip正则式
2009/05/07 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
用python与文件进行交互的方法
2018/03/01 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
古汉语文学求职信范文
2014/03/16 职场文书
摄影展策划方案
2014/06/02 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
体育教师个人工作总结
2015/02/09 职场文书
中秋节慰问信
2015/02/15 职场文书
财务工作个人总结
2015/02/27 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers