美文网首页
JQuery的事件对象关于坐标的说明

JQuery的事件对象关于坐标的说明

作者: Azur_wxj | 来源:发表于2017-09-07 16:50 被阅读12次

jQuery的事件句柄函数有参数Event,它有关于当前触发元素的相关坐标,它们是

  • pageX、pageY
  • screenX、screenY
  • clientX、clientY
  • offsetX、offsetY

简单来说:

  1. pageX、pageY表示离文档页面的坐标,如果发生滚动,则要把滚动距离也算上。
  2. offsetX、offsetY表示相对于事件源元素(精准触发元素)的坐标。
  3. screenX、screenY表示相对屏幕的坐标。
  4. clientX、clientY表示相对可视窗口的坐标。

下面以Google Chrome为例来图示说明:

关于X


关于Y


不同浏览器对这些属性的支持

如果不用jQuery,则JavaScript本身也有事件对象,它们也有这些属性:


其中:

  • offsetX,clientX,pageX,screenX在五大主流浏览器中实现的基本一致。
  • 对于layerX,不同浏览器实现不同:
  • 对于x,不同浏览器实现不同:

所以,一般不使用layerXx

相关文章

  • JQuery的事件对象关于坐标的说明

    jQuery的事件句柄函数有参数Event,它有关于当前触发元素的相关坐标,它们是 pageX、pageY scr...

  • jQuery知识整理

    jQuery jQuery和DOM关系 jquery框架对象分析 加载事件 事件绑定 动画效果 jquery封装的...

  • 有用的jquery整理

    jQuery遍历 - each() 方法 jQuery对象和DOM对象使用说明 Jquery css元素 默认情况...

  • jQuery操作事件

    总结:jQuery对象打点 去掉 on 的 js 事件 (1)、jQuery对象 . click(functio...

  • jQuery事件操作和插件

    jQuery事件操作 简单方式注册事件 语法:jQuery对象.事件名(事件处理程序) on方法注册事件 注册简单...

  • 前端笔记15

    jQuery特殊效果 jQuery动画 jQuery循环 元素的绝对位置 鼠标的移入和移出 input框事件 jQ...

  • jQuery|event的属性和方法

    jQuery事件对象event的属性和方法 事件处理(事件对象、目标元素的获取,事件对象的属性、方法等)在不同浏览...

  • jQuery事件对象

    鼠标事件 mousedown与mouseup事件 mousedown事件触发需要以下几点: mousedown强调...

  • js初识第八节

    事件对象的认识 事件对象常用的几个坐标的认识 一个图片跟鼠标的效果 鼠标的button属性 键盘的keycode属...

  • JQuery 基础

    一、DOM对象和JQuery对象的转换 二、JQuery选择器 三、对象方法 四、操作节点 五、事件设置 六、动画...

网友评论

      本文标题:JQuery的事件对象关于坐标的说明

      本文链接:https://www.haomeiwen.com/subject/bfiijxtx.html