javascript事件坐标
clientX 鼠标在页面显示区域的坐标
screenX鼠标在显示屏幕上的坐标
layerX 鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角
offsetX 鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便
pageX 鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位
x 跟layerX一个效果,可作为layerX的直接替换属性
offsetLeft:这个属性不是事件对象的属性,而是DOM对象所有的,该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置
javascript事件坐标的更多相关文章
- JavaScript事件坐标区别(offset,client,page)
学习笔记. 1. offset:其定位原点是当前元素左上角 2. client:其定位原点是当前窗口左上角 3. page:其定位原点是当前页面左上角 下面来验证一下. 先上代码: <!doct ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- javaScript事件(五)事件类型之鼠标事件
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...
- JavaScript事件类型
JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...
- javascript事件与event对象的属性
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
随机推荐
- 检测python进程是否存活
crontab -e */ * * * * /data/log_realtime/check.sh > /data/log_realtime/check.log >& * * /d ...
- C和指针 第三章--数据
简要概述: <C和指针>第三章对数据进行了描述. 其中主要讲解了---变量的三个属性:作用域.链接属性和存储类型. 这三个属性决定了该变量在“什么地方可以使用”以及“该变量的值能够保持多久 ...
- springMVC 踩过的坑 - 记录
1. 后台持久层Spring Jpa(即hibernate), 前台angularJS(angularJS只接受json串), 在后台使用DTO层对象代替domain(entity)与前台交互时, 传 ...
- Tkinter LabelFrame
Tkinter LabelFrame: 在一个labelframe一个简单的容器构件.其主要目的是作为一个间隔或复杂的窗口布局容器. 在一个labelframe一个简单的容器构件.其主要目的是作 ...
- Newtonsoft.Json(Json.Net)学习
转自原文 Newtonsoft.Json(Json.Net)学习笔记 Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库.软件下载地址: http://www.newto ...
- 用Python将word文件转换成html(转)
用Python将word文件转换成html 序 最近公司一个客户大大购买了一堆医疗健康方面的科普文章,希望能放到我们正在开发的健康档案管理软件上.客户大大说,要智能推送!要掌握节奏!要深度学习!要 ...
- Spring技术内幕之Spring Data JPA-自定义Repository实现
1.自定义Repository方法接口,让接口的实现类来继承这个中间接口而不是Repository接口 package com.data.jpa.dao; import java.io.Seriali ...
- Spring 学习记录4 ResourceLoader
ResourceLoader Spring的ApplicationContext继承了ResourceLoader接口.这个接口主要就是可以加载各种resource.. 接口还是比较简单的: /* * ...
- Linux重启mysql Error getting authority: Error initializing authority: Could not connect: Resource temporarily unavailable (g-io-error-quark, 27)
问题: Linux下重启mysql: systemctl restart mysqld 出现以下错误: Error getting authority: Error initializing auth ...
- 文件操作类File
File类:提供用于创建.复制.删除.移动和打开文件的静态方法.File类 FileInfo类:提供创建.复制.删除.移动和打开文件的属性和实例方法.FileInfo类 Directory类:公开用于 ...