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中的prototype使用说明
Apr 13 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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/01 无线电
用PHP发电子邮件
2006/10/09 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
js prototype截取字符串函数
2010/04/01 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
服装电子商务创业计划书
2014/01/30 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2014年医务科工作总结
2014/12/18 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
初中体育课教学反思
2016/02/16 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js