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常用小技巧小结
Dec 29 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
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
URL Rewrite的设置方法
2007/01/02 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
vue cli 全面解析
2018/02/28 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python求离散序列导数的示例
2019/07/10 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python异步Web框架sanic的实现
2020/04/27 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
Servlet方面面试题
2016/09/28 面试题
销售冠军获奖感言
2014/02/03 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS