热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javascript坐标:event.x、event.clientX、event.offsetX、event.screenX

clientX设置或获取鼠标指针位置相对于窗口客户区域的x坐标,其中客户区域不包括窗口自身的控件和滚动条。clientY设置或获取鼠标指针位置相对于窗口客户区域的y坐标,其中客户区域不包括窗口自身的控件和滚动条。offsetX设置或获取鼠标指针位置相对于触发事件的对象的x坐标。offsetY设置或获取鼠标指针位置相对于触发事件的对象的y坐标。s

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标,event.X也一样。但是如果设置事件对象的定位属性值为relative,event.clientX不变,而event.X返回事件对象的相对于本体的坐标。

 

 代码如下

x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。
offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕

 代码如下





Click here to show.



 

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标
   event.X也一样
   但是如果设置事件对象的定位属性值为relative
   event.clientX不变
   而event.X返回事件对象的相对于本体的坐标
   event对象详解 ICOOE 2000.3.31 http://www.hzhuti.com
   event代表事件的状态,例如事件发生的的元素、鼠标的位置等等,event对象只在事件过程中才有效。
   
   event属性:
   
   altKey
   检索ALT键的当前状态
   可能的值 true为关闭
   false为不关闭
   
   button
   检索按下的鼠标键
   可能的值: 0 没按键
   1 按左键
   2 按右键
   3 按左右键
   4 按中间键
   5 按左键和中间键
   6 按右键和中间键
   7 按所有的键
   
   cancelBubble
   设置或检索当前事件是否将事件句柄起泡
   可能的值: false 启用起泡
   true 取消该事件起泡
   
   clientX
   检索与窗口客户区域有关的鼠标光标的X坐标,属性为只读,没有默认值。
   
   clientY
   检索与窗口客户区域有关的鼠标光标的Y坐标,属性为只读,没有默认值。
   
   ctrlKey
   ctrlKey 检索CTRL键的当前状态
   可能的值 true为关闭
   false为不关闭
   
   dataFld
   检索被oncellchange事伯影响的列
   
   aTransfer
   为拖放操作提供预先定义的剪贴板式。
   
   Element
   检索在on mouseover和on mouseout事件期间退出的对象指针
   
   keyCode
   设置或检索与引发事件的关键字相关联的Unicode关键字代码
   该属性与onkeydown onkeyup onkeypress一起使用
   如果没有引发事件的关键字,则该值为0
   
   offsetX
   检索与触发事件的对象相关的鼠标位置的水平坐标
   
   offsetY
   检索与触发事件的对象相关的鼠标位置的垂直坐标
   
   propertyName
   检索在对象上己更改的特性的名称
   
   reason
   检索数据源对象数据传输的结果
   可能的值:
   0 数据传输成功
   1 数据传输失败
   2 数据传输错误
   
   recordset
   检索数据源对象中默认记录集的引用
   该特性为只读
   
   repeat
   检索一个事件是否被重复
   该属性只有在onkeydown事件重复时才返回true
   
   returnvalues
   设置或检索从事件中返回的值
   可能的值:
   true 事件中的值被返回
   false 源对象上事件的默认操作被取消
   
   screenX
   检索与用户屏相关的鼠标的水平位置
   
   screenY
   检索与用户屏相关的鼠标的垂直位置
   
   shiftKey
   检索shiftKey键的当前状态
   可能的值 true为关闭
   false为不关闭
   
   srcElement
   检索触发事件的对象
   
   srcFilter
   检索导致onfilterchange事件触发的过滤器对象
   
   srcUm
   检索触发事件行为的同一资源名称
   除非下面两个条件都为真,否则该特性被设置为null
   1.行为被附加到触发事件的要素上
   2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件
   
   toElement
   检索作为on mouseover或者on mouseout事件结果而移动的对象
   
   type
   检索事件对象中的事件名称
   
   x
   检索相对于父要素鼠标水平坐标的整数
   
   y
   检索相对于父要素鼠标垂直坐标的整数

更多详细内容请查看:http://www.111cn.net/wy/js-ajax/42415.htm


推荐阅读
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 本文介绍了一个适用于PHP应用快速接入TRX和TRC20数字资产的开发包,该开发包支持使用自有Tron区块链节点的应用场景,也支持基于Tron官方公共API服务的轻量级部署场景。提供的功能包括生成地址、验证地址、查询余额、交易转账、查询最新区块和查询交易信息等。详细信息可参考tron-php的Github地址:https://github.com/Fenguoz/tron-php。 ... [详细]
  • Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案
    本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题,并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式,我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的,因此无需担心会话信息被覆盖的问题。需要注意的是,本文讨论的是多个客户端级别上的多用户登录,而非同一个浏览器级别上的多用户登录。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • XMLhttpREquest_Ajax技术总结之XmlHttpRequest
    Ajax1、 什么是ajax   ... [详细]
  • html和js代码互转,html转html5
    本文目录一览:1、html网页跳转javascript代码实现 ... [详细]
  • 关于extjs开发实战pdf的信息
    本文目录一览:1、extjs实用开发指南2、本 ... [详细]
  • asp.net(vb脚本)如何获取xml的节点值?xmlversion1.0encodingutf-8?rootimageimagemenusmenuurl#frame_paren ... [详细]
  • html结构 ... [详细]
  • 本文介绍了RPC框架Thrift的安装环境变量配置与第一个实例,讲解了RPC的概念以及如何解决跨语言、c++客户端、web服务端、远程调用等需求。Thrift开发方便上手快,性能和稳定性也不错,适合初学者学习和使用。 ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
author-avatar
手机用户2502935101
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有