JavaScript --- 取得鼠标事件的坐标

说明:

  • clientX和clientY属性:事件发生时,鼠标指针在视口中的水平和垂直坐标。
  • pageX和pageY属性:鼠标光标在页面中的位置。
  • screenX和screenY属性:鼠标事件发生时,鼠标指针相对于整个屏幕的坐标信息。
  • IE8及更早的版本不支持事件对象上的页面坐标(pageX,pageY)。
  • EventUtil参考上一篇。
// 取得鼠标事件在页面中的坐标
var div =document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event) {event = EventUtil.getEvent(event);var pageX = event.pageX,pageY = event.pageY;if (pageX === undefined) {    // 兼容IE8及以下pageX = event.clientX + (document.body.scrollLeft || document.document.scrollTop);}if (pageY === undefined) {pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);}alert("Page coordinates: " + pageX + "," + pageY);
});
//取得鼠标事件的屏幕坐标
var div = document.getElementById("maDiv");
EventUtil.addHandler(div, "click", function(event){event = EventUtil.getEvent(event);alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

摘自《JavaScript高级程序设计》(第3版) P371

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251604.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript语义基础

变量(Variables) Variables是你存储数据的容器。声明一个变量需要使用关键字var,然后输入变量的名称。 1 var myvar; 定义一个变量后,可以赋予变量一个值: 1 myvar "mxp"; 可以将上述操作写在一行&#x…

spring面试专题一点通,再也不用担心面试不会回答了

前言文章内容有点小长,希望你能耐心阅读,更多Java面试题以及学习资料获取方式:加Qun:1017-599-436免费获取。还有更多包括电子书,PDF文档以及视频精讲可以分享给大家,内容覆盖很广,分布式缓存、RPC 调用、Z…

bzoj4033 [HAOI2015]树上染色

题目:https://www.lydsy.com/JudgeOnline/problem.php?id4033 重要的思路:与其考虑每一个点对的贡献,不如考虑每条边的贡献(被经过了几次)! 树形dp。 总共的黑点和白点的个数都是已知的,所以知…

JavaScript --- 表单focus,blur,change事件的实现

假设有一个文本框,我们只允许用户输入数值。为此,我们希望: 1.利用focus事件修改文本框内容, 2.利用blur事件回复文本框的内容, 3.利用change事件在用户输入了非数值字符时再次修改背景颜色。 var EventUtil {addHandler: function(element…

mysql日期格式转化

select DATE_FORMAT( 20170701, %Y-%m-%d);先挖坑转载于:https://www.cnblogs.com/tuhooo/p/7766221.html

Solr管理页面 上

DashBoard(仪表盘)Logging(日志)Core Admin(Core管理)在Solr中,每一个Core,代表一个索引库,里面包含索引数据及其配置信息。Solr中可以拥有多个Core,也就同时…

GRPC协议的相关原理

GRPC的Client与Server,均通过Netty Channel作为数据通信,序列化、反序列化则使用Protobuf,每个请求都将被封装成HTTP2的Stream,在整个生命周期中,客户端Channel应该保持长连接,而不是每次调用重新创建Chann…

Echarts --- 各个省份的坐标

纯手打…效果如下 1.新疆: [86.61 , 40.79] 2.西藏:[89.13 , 30.66] 3.黑龙江:[128.34 , 47.05] 4.吉林:[126.32 , 43.38] 5.辽宁:[123.42 , 41.29] 6.内蒙古:[112.17 , 42.81] 7.北京:[116.40 , 40.40 ] 8.宁夏:[106.27 , 36.76] 9.山西:[111.95,37.65] 10.河北:[115.21 , 38.…

xxx征集系统项目目标文档

问题 每四人一组,讨论结束后,每人根据课堂讨论结果提交一份系统利益相关者案例。撰写撰写项目目标文档(目标,好处,度量标准。) 项目目标文档 目标: (1)需求填报 &#xf…

高并发大流量专题---10、MySQL数据库层的优化

高并发大流量专题---10、MySQL数据库层的优化 一、总结 一句话总结: mysql先考虑做分布式缓存,过了缓存后就做mysql数据库层面的优化 1、mysql数据库层的优化的前面一层是什么? 数据库缓存:突破了数据库缓存就需要做mysql数据库层…

【彩彩只能变身队】后端工作总结

2018.06.09 早上8点到晚上10点 冲刺前后端交互(vueexpressmysql) 8&#xff1a;00-12&#xff1a;00 &#xff1a; 前端把请求写好&#xff1a; <template> <div class"LoginForm"> <el-form ref"form" label-width"80px"…

web安全

web安全 DOS命令 web攻防必备课笔记 慕课xss学习 阮一峰&#xff1a;MVC、MVP和MVVM的图示转载于:https://www.cnblogs.com/hanxuming/p/7774092.html

JavaScript --- 渲染数据量大的数组

很多时候&#xff0c;需要在页面上展示从后台来的大量数据,如果一次性渲染&#xff0c;会影响用户的体验。(而且浏览器中的JS严格限制了资源) /* *使用分组的思想来渲染大量的数组 *parmas array 要处理的数组 *params process 对数组中每一个item进行的操作 *parmas context …

Jquery操作select小结

每次操作select都要查资料&#xff0c;干脆总结一下。 为select设置placeholder <select class"form-control selOP" placeholder"Pick Orchestration Plan"><option value"" disabled selected styledisplay:none;>Pick Orchestrat…

第六讲:PrintClient工具的使用

一些简单命令&#xff1a; cp -rf 源目录 目的目录 chmod -R 777 文件名 motelist 查看节点路径 make telosb 编译代码 make telosb reinstall 下载但不编译 make telosb install 编译并且下载 make telosb install, 2 bsl,/dev/ttyUSB0 下载指定路径 java net.tinyos.tools.Li…

SQL Server

查看数据库服务器名称&#xff1a;tracert 192.168.10.01 转载于:https://www.cnblogs.com/hongwei2085/p/9174760.html

css --- 选择器

标签选择器 // 标签选择器是最简单的选择器, 它的命名只要和对应的HTML标签相同即可 h1 {font-size: 30px;color: #333; }类选择器 // 类选择器也称为class选择器,它的语法非常简单,在class名称前面加上一个"."符号 <div class"red content"></…

C++标准输入流、输出流以及文件流

1、流的控制 iomanip 在使用格式化I/O时应包含此头文件。 stdiostream 用于混合使用C和C 的I/O机制时&#xff0c;例如想将C程序转变为C程序 2、类继承关系 ios是抽象基类&#xff0c;由它派生出istream类和ostream类&#xff0c; iostream类支持输入输出操作&…

Hadoop学习笔记—8.Combiner与自定义Combiner

一、Combiner的出现背景 1.1 回顾Map阶段五大步骤 在第四篇博文《初识MapReduce》中&#xff0c;我们认识了MapReduce的八大步凑&#xff0c;其中在Map阶段总共五个步骤&#xff0c;如下图所示&#xff1a; 其中&#xff0c;step1.5是一个可选步骤&#xff0c;它就是我们今天需…

6-12mysql库的操作

1&#xff0c;mysql库的各种分类: nformation_schema&#xff1a; 虚拟库&#xff0c;不占用磁盘空间&#xff0c;存储的是数据库启动后的一些参数&#xff0c;如用户表信息、列信息、权限信息、字符信息等.  performance_schema&#xff1a; MySQL 5.5开始新增一个数据库&am…