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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 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数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python数据封装json格式数据
2018/03/04 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
文明村镇申报材料
2014/05/06 职场文书
七夕情人节促销方案
2014/06/07 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
房屋维修申请报告
2015/05/18 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android