【offsetX、clientX、screenX、pageX、layerX】的更多相关文章

鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ console.log(e) } 3. onmouseup 鼠标松开事件 box.onmouseup = function(e){ console.log(e) } 4. onmousemove 鼠标移动事件 box.onmousemo…

offsetX、clientX、screenX、pageX、layerX

pageX/Y 原点相对于文档窗口左上角. offsetX/Y 原点相对于触发事件元素的左上角,需要注意的是,offset是有负值的,如果你的元素有边框,那么offset会是负值. (黑色为鼠标点击点) (测试了IE11.Opera54.0.2952.71.Chrome68.0.3423.2.Firefox61.0.2中offset均不含边框的宽度) clientX/Y 原点相对于可视窗口左上角 screenX/Y 原点相对于屏幕左上角 layerX/Y 原点相对于position为absolu…

clientX、pageX、offsetX、screenX的区别

这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂! 区别: clientX.clientY: 相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性. pageX.pageY: 类似于clientX.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. offsetX.offsetY: 相对于事件源元素(src…

screenX、clientX、pageX的区别

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org…

pageX、pageY全兼容

pageX.pageY全兼容 var pos=function(o,x,y,event){var posX=0,posY=0;var e=event||window.event;if(e.posX||e.posY){   posX=e.pageX;   posY=e.pageY;}else if(e.clientX||e.clientY){   posX=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;…

ev的offsetX,pageX,clientX和screenX

event.offsetX.event.offsetY(相对事件发生的具体元素左上角的定位) 鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性. event.clientX.event.clientY(相对可视区域左上角的绝对定位) 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY(整个HTML文档中的绝对定位) 类似于…

JS中的事件、事件冒泡和事件捕获、事件委托

https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html JavaScript事件模型及事件代理 事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模型. 1.原始事件模型(DOM0级) 这是一种被所有浏…

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <…

C#、JAVA操作Hadoop（HDFS、Map/Reduce）真实过程概述。组件、源码下载。无法解决：Response status code does not indicate success: 500。

一.Hadoop环境配置概述 三台虚拟机,操作系统为:Ubuntu 16.04. Hadoop版本:2.7.2 NameNode:192.168.72.132 DataNode:192.168.72.135,192.168.72.136 注:具配置过程,不具备介绍了,网上很多. 二.eclipse(JAVA)环境配置概述 操作系统:Windows 10 eclipse版本:Mars.2 Release (4.5.2) 1.hadoop-eclipse-plugin-2.7.2.jar组件放plu…

教你一招：解决win10/win8.1系统在安装、卸载软件时出现2502、2503错误代码的问题

经常遇到win10/win8.1系统在安装.卸载软件时出现2502.2503错误代码的问题. 解决办法: 1.打开任务管理器后,切换到“详细信息”选项卡,找到explore.exe这个进程,然后结束进程,如下图所示: 2.接下来,点击任务管理器上面的“文件” - “运行新任务”,重新执行explore.exe这个进程,并勾选以管理员权限创建此任务,如下图: 3.接下来就可以正常安装或卸载你的软件了. PS:其实整个过程其实就是把explorer.exe(资源管理器)重启了一下,有的同学说直接在任…

Map集合及与Collection的区别、HashMap和HashTable的区别、Collections、

特点:将键映射到值的对象,一个映射不能包含重复的键,每个键最多只能映射到一个值. Map集合和Collection集合的区别 Map集合:成对出现 (情侣)                                               双列集合 Collection:单个出现  (单身狗)   所以功能才这么多               单列集合 Key:键  Value:值 功能 1.添加功能 V put(K key,V value):添加元素 如果键是第一次存储,就直接存储,…

兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bindHandler = (function() { if (window.addEventListener) {// 标准浏览器 return function(elem, type, handler) { // elem:DOM节点 type:事件类型 handler:事件处理函数 // 最后一个…

TFS API：三、TFS WorkItem添加和修改、保存

TFS API:三.TFS  WorkItem添加和修改.保存 WorkItemStore:表示跟踪与运行 Team Foundation Server的服务器的工作项客户端连接. A.添加工作项 1.首先获得某服务器的WorkItemStore. WorkItemStore workstore = server.GetService<WorkItemStore>(); 2.然后通过对上面WorkItemStore获得Project项目. Project project = workstore…

C#与Java对比学习：类型判断、类与接口继承、代码规范与编码习惯、常量定义

类型判断符号: C#:object a;  if(a is int) { }  用 is 符号判断 Java:object a; if(a instanceof Integer) { } 用 instanceof 符号判断 类与接口的继承: C#:public class MDataRow : List<MDataCell>, IDataRecord, ICustomTypeDescriptor Java:public class MDataRow extends ArrayList<M…

TCP 三次握手四次挥手, ack 报文的大小.tcp和udp的不同之处、tcp如何保证可靠的、tcp滑动窗口解释

一.TCP三次握手和四次挥手,ACK报文的大小 首先连接需要三次握手,释放连接需要四次挥手 然后看一下连接的具体请求: [注意]中断连接端可以是Client端,也可以是Server端. [注意] 在TIME_WAIT状态中,如果TCP client端最后一次发送的ACK丢失了,它将重新发送.TIME_WAIT状态中所需要的时间是依赖于实现方法的.典型的值为30秒.1分钟和2分钟.等待之后连接正式关闭,并且所有的资源(包括端口号)都被释放. [问题1]为什么连接的时候是三次握手,关闭的时候却是四次…

Python学习笔记 之 递归、二维数组顺时针旋转90°、正则表达式

递归.二维数组顺时针旋转90°.正则表达式 1.   递归算法是一种直接或间接调用自身算法的过程. 特点: 递归就是在过程或函数里调用自身 明确的递归结束条件,即递归出口 简洁,但是不提倡 递归次数多容易造成栈溢出 要求: 每次调用递归规模上有所减小 前一次为后一次做准备 规模较小时必须直接给出解答而不再进行递归调用 例子:递归实现二分法 def searchMyData(mydate,a1): mid = int(len(mydate)/2) if mid >= 1: if mydate[mi…

【Go入门教程3】流程（if、goto、for、switch）和函数（多个返回值、变参、传值与传指针、defer、函数作为值/类型、Panic和Recover、main函数和init函数、import）

这小节我们要介绍Go里面的流程控制以及函数操作. 流程控制 流程控制在编程语言中是最伟大的发明了,因为有了它,你可以通过很简单的流程描述来表达很复杂的逻辑.Go中流程控制分三大类:条件判断,循环控制和无条件跳转. if if也许是各种编程语言中最常见的了,它的语法概括起来就是:如果满足条件就做某事,否则做另一件事. Go里面if条件判断语句中不需要括号,如下代码所示 if x > 10 {     fmt.Println("x is greater than 10") } els…

Berkeley DB的数据存储结构——哈希表（Hash Table）、B树（BTree）、队列（Queue）、记录号（Recno）

Berkeley DB的数据存储结构 BDB支持四种数据存储结构及相应算法,官方称为访问方法(Access Method),分别是哈希表(Hash Table).B树(BTree).队列(Queue).记录号(Recno).在创建数据库的时候,必须通过dbtype参数将存储结构指定为上述结构中的一种,一旦数据库文件已创建则不能再更改其结构. 结构 描述 BTree 数据存储在一个有序的,平衡的树型结构中.在B树结构中,Key和Value都可以复杂的数据,这意味着它们可以是整数.字符串或复杂的数据…

C#微信公众号接口开发，灵活利用网页授权、带参数二维码、模板消息，提升用户体验之完成用户绑定个人微信及验证码获取

一.前言 当下微信公众号几乎已经是每个公司必备的,但是大部分微信公众账号用户体验都欠佳,特别是涉及到用户绑定等,需要用户进行复杂的操作才可以和网站绑定,或者很多公司直接不绑定,而是每次都让用户填写账号密码.作为微信接口开发人员我们知道网页授权可以用作微信网页用作安全登录,带参数二维码的使用用作记录用户来源,模板消息用作购物消费等消息的通知,但是很少看到有综合利用这些高级接口做出体验比较好的公众账号,这里分享一些我开发的用户绑定和验证码的一些心得.所需要的接口有基础的回复.网页授权.带参数二维码.…

Java虚拟机6：内存溢出和内存泄露、并行和并发、Minor GC和Full GC、Client模式和Server模式的区别

前言 之前的文章尤其是讲解GC的时候提到了很多的概念,比如内存溢出和内存泄露.并行与并发.Client模式和Server模式.Minor GC和Full GC,本文详细讲解下这些概念的区别. 内存溢出和内存泄露的区别 1.内存溢出 内存溢出指的是程序在申请内存的时候,没有足够大的空间可以分配了. 2.内存泄露 内存泄露指的是程序在申请内存之后,没有办法释放掉已经申请到内存,它始终占用着内存,即被分配的对象可达但无用.内存泄露一般都是因为内存中有一块很大的对象,但是无法释放. 从定义上可以看出,内…

Spring学习总结（二）——静态代理、JDK与CGLIB动态代理、AOP+IoC

一.为什么需要代理模式 假设需实现一个计算的类Math.完成加.减.乘.除功能,如下所示: package com.zhangguo.Spring041.aop01; public class Math { //加 public int add(int n1,int n2){ int result=n1+n2; System.out.println(n1+"+"+n2+"="+result); return result; } //减 public int sub(…

CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <…

js,onblur后下一个控件获取焦点判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval

需求: input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误.但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显示验证通不过的错误). 方法1: 通过下述代码在input的onblur事件中取得当前正在活跃(被点击)的控件,然后根据业务来排除特殊控件().经测试,本方法适用IE8,在Firefox13.Chrome20测试通不过(target取得的一直是body). 参考:document.activeEle…

Windows网络驱动、NDIS驱动(微端口驱动、中间层驱动、协议驱动)、TDI驱动(网络传输层过滤)、WFP(Windows Filtering Platform)

catalog . 引言 . Windows 2000网络结构和OSI模型 . NDIS驱动 . NDIS微端口驱动编程实例 . NDIS中间层驱动编程实例 . NDIS协议层驱动编程实例 . TDI驱动 . TDI的过滤框架 . WFP(Windows Filtering Platform windows过滤平台) 0. 引言 最早出现的网络驱动应该是网卡驱动,这是Windows的下进行网络安全攻防常见的需求,为了进一步分割应用程序的网络数据传输与下层协议直到下层硬件的关系,又出现了协议驱动,…

CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与块级标签 3.1.行内标签与块标签区别 3.2.隐藏 3.3.行内块标签 3.4.菜单示例 四.重置浏览器默认样式 4.1.CSSReset 4.1.1.MT css reset 4.1.2.PC css reset 4.1.3.PPTV css reset 4.1.4 YUI css res…

Delphi函数参数传递 默认参数（传值）、var（穿址）、out（输出）、const（常数）四类

Delphi的参数可以分为:默认参数(传值).var(传址).out(输出).const(常数)四类 可以对比C/C++的相关知识,类比学习. 1.默认参数是传值,不会被改变,例子 function MyFun(x : Integer) : Integer; begin Inc(x); Result := x; end; 2.var参数是传址,会被改变,例子 function MyFunVar(var x : Integer) : Integer; begin Inc(x); Result :=…

android 获取文件夹、文件的大小 以B、KB、MB、GB 为单位

android 获取文件夹.文件的大小 以B.KB.MB.GB 为单位   public class FileSizeUtil { public static final int SIZETYPE_B = 1;//获取文件大小单位为B的double值 public static final int SIZETYPE_KB = 2;//获取文件大小单位为KB的double值 public static final int SIZETYPE_MB = 3;//获取文件大小单位为MB的double值…

pageX，clientX，screenX，offsetX的区别

pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不算.浏览器窗口缩小时,clientX/clientY的最大值也会缩小.以浏览器左上角为参考点,所以不包括滚动距离. screenX/screenY: 鼠标在屏幕上的坐标,最大值不超过屏幕分辨率.以屏幕为参考点. offsetX/offsetY: 针对IE用的pageX/pageY. event.cl…

当一个类、一个实例域、方法被定义为private、public 时意味着什么

1.设计private public的原因 2.当一个类.一个实例域.方法被定义为private.public 时意味着什么…

c语言求平面上2个坐标点的直线距离、求俩坐标直线距离作为半径的圆的面积、递归、菲波那次数列、explode

#include <stdio.h> #include <math.h> #include <string.h> char explode( char * str , char symbol ); double distance ( int x1 , int y1 , int x2 , int y2 ); // 求平面上2个坐标点的直线距离 double circle_area( double radius ); // 求圆面积. radius 半径 double tw…