探索javascript----事件对象下的各种X和Y

每次用到诸如client,screen,offset等,虽然通常都是能用对的,但是总觉得不是那么的自信没错。所以整理一下可以再需要的时候来查阅。

一:clientX和clientY,screenX和screenY:

可见:正如字面所讲,screen是鼠标相对屏幕坐标,但screenY取不到客户区以外的值,而client是相对于客户区的。

二:页面坐标位置(page):pageX和pageY:

注:此图滚动条没有画出;

pageX和pageY是相对于文档流的,包含scroll值,所以,在第一屏下,和clientX和clientY没有差别;

此图的div是一个绝对定位的区块。此时layerX和layerY是相对于黄色区块的。

三:偏移量(offset): offsetWidth,offsetHeight,offsetTop,offsetLeft: 

元素的偏移量是根据它的直接父元素来定义的。

区块大小offset(Width/Height)=padding+border+content+scroll

所以不包含margin(一个区块加了背景并不会涉及margin部分)

图引用于http://www.cnblogs.com/skylar/p/4121508.html

一种获取在页面中偏移量的方法:

var getOffset = {
            top: function (obj) {
                return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
            },//递归,一层一层往上累加offsetTop
            left: function (obj) {
                return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
            }
        };

偏移量是只读的,每次访问都会重新计算,注意性能问题。

四:客户区(client)大小:

  client=padding+content,不包含滚动条的宽高 (而,offset=padding+content+border+scroll)  ,记忆:client就是两部分组成的,padding和content;offset由四部分组成,不含margin。=>无论谁都不关margin鸟事。

五:滚动大小(scroll):scrollWidth,scrollHeight,scrollTop,scrollLeft:

“有些元素没有执行任何代码也可以自动添加滚动条,如HTML;而有些元素需要添加overflow:scroll才能有滚动条”。

  可认为html元素是在浏览客户区里滚动的元素(ie6之前版本怪异模式下是body,所以计算客户区宽才有:document.documentElement.clientWidth||document.body.clientWidth)

带有滚动条的页面总高度是:document.documentElement.scrollHeight||document.body.scrollHeight; 

   图引用于http://www.cnblogs.com/skylar/p/4121508.html

注:在确定文档总高度时,应该取scrollHeight和clientHeight的最大值,以确保兼容性。

八:未完待续

时间: 2024-07-30 14:49:25

探索javascript----事件对象下的各种X和Y的相关文章

Javascript 事件对象(六)键盘事件

keyCode获取用户按下键盘的哪个按键 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script> 7 /* 8 onkeydown : 当键盘按键按下的时候触发

Javascript 事件对象(五)事件捕获

事件捕获: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div {padding: 50px;} 8 #div1 {background: red;

Javascript 事件对象进阶(一)拖拽的原理

拖拽原理 鼠标和Div的相对距离不变 三大事件 把拖拽加到document上 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height

第一百二十节,JavaScript事件对象

JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的捕获/冒泡流的函数. 一.事件对象 事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息. 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. //

JavaScript的对象/下

JavaScript的对象 一.BOM对象 BOM----browser object model 1.window对象 所有浏览器都支持window对象. 概念上讲,一个html文档对应一个window对象. 功能上讲:控制浏览器窗口的. 使用上讲:window对象不需要创建对象,直接使用即可. 2.widow对象方法 alert() 显示带有一段信息和一个确认按钮的警告框 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框. prompt() 显示可提示用户输入的对话框 op

JavaScript事件对象【转】

一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的鼠标按钮(鼠标滚轮按钮) 2 表示次鼠标按钮(常规一般是鼠标右键) IE 中的 button 属性0 表示没有按下按钮1 表示主鼠标按钮(常规一般是鼠标左键)2 表示次鼠标按钮(常规一般是鼠标右键)3 表示同时按下了主.次鼠标按钮4 表示按下了中间的鼠标按钮5 表示同时按下了主鼠标按钮和中间的鼠标按

JavaScript事件对象与事件处理程序

在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然存在属性 ①DOM中的事件对象event属性   (1).type属性用于获取事件类型   (2).target.srcElement<兼容IE事件>属性用于获取事件目标    (3).stopPropagation()方法 用于阻止事件冒泡   (4).preventDefault() 方法 阻

JavaScript事件对象EventUtil

JS中事件对象有很多种,兼容性参差不齐,这个对象封装了大部分所需的各种方法 var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ element.addEventListener(type,handler,false); //使用DOM2级方法添加事件 }else if(element.attachEvent){ //使用IE方法添加事件 element.at

JavaScript事件对象

Html事件 onclick ---单击事件                              onchange --- 值改变事件(下拉列表值改变时)                   onfocus --- 获取焦点 onblur --- 失去焦点 [[email protected]]      onmouseover ---鼠标移入                                           onumoseout --- 鼠标移出 onmousemove