本文共 6514 字，大约阅读时间需要 21 分钟。
检测页面刷新
function closeIt()
{ return “Any string value here forces a dialog box to \n” + “appear before closing the window.”; } window.onbeforeunload = closeIt; 网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidths
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标
offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由
offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由
offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5： clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth
(包括边线的宽) 网页可见区域高： document.body.offsetHeight
(包括边线的高) 网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
chrome：e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标ff：
e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——无 e.clientX——相对可视区域的坐标 e.x——无opera：
e.pageX——相对整个页面的坐标
e.layerX——无 e.offsetX——相对当前坐标系的内容区域左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标safari：（这个和chrome是一样的）
e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标IE9：
e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离（这个NB轰轰了····=。=） e.offsetX——相对当前坐标系的内容区域左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对当前坐标系的border左上角开始IE8：
e.pageX——无
e.layerX——无 e.offsetX——相对当前坐标系的内容区域左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对当前坐标系的border左上角开始IE7：
e.pageX——无
e.layerX——无 e.offsetX——相对当前坐标系的内容区域左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对当前坐标系的border左上角开始IE6：
e.pageX——无
e.layerX——无 e.offsetX——相对当前坐标系的内容区域左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对当前坐标系的border左上角开始2.PageX和clientX
pageX指鼠标在页面上的位置，以页面左侧为参考点 clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。 即当有滚动条时clientX 小于 pageX//ie678不识别pageX
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度,还是直接上图比较清楚3、screenX
鼠标在屏幕中的位置，指的是鼠标到电脑屏幕左侧的距离。 各个浏览器相同。 与clientX的区别是clientX是到浏览器的距离。 例如：当网页缩小，拖动到屏幕中间时，screnX 大于 clientX4、offsetX和layerX
为了兼容浏览器，layerX是FF、chrome识别，offsetX是除了FF之外。如果触发元素设置了position，则offsetX等于layerX
如果页面有滚动条，添加滚动的距离。layerX:FF特有，是相对于父元素的位置，鼠标相对于“触发事件的元素的层级关系中离该元素最近的，设置了position的父元素”的边界的位置，从border的左上角开始定位，即如果这个父
元素存在border，则坐标原点在border的左上角，而不是内容区域的左上角。
offsetX:IE特有，鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便，FF没有直接替换的属性。
点击li，如果UL设置了position则layerX相对于UL，如果没有则向父级冒泡寻找设置了position的元素，直到根节点body。
offsetX是相对于被点击了的LI元素。 5、e.x FF不识别 到可视区域的距离，有无滚动条相同，同clientX opera，chrome和safari的event.x返回值和event.clientX相同 IE8910event.x返回值和event.clientX相同ie7e.x比e.clientX少2px
html: #box{ width: 200px; height: 100px; cursor: move; position: absolute; top: 30px; left: 30px; background-color: #FFF; border: 1px solid #CCCCCC; -webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;-moz-user-select: none;-khtml-user-select: none;user-select: none;} #coor { width: 10px; height: 10px; overflow: hidden; cursor: se-resize; position: absolute; right: 0; bottom: 0; background-color: #09C; } body { background-color: #F3F3F3; }
js:
(function() { (document).mousemove(function(e) { if (!!this.move) { var posix = !document.move_target ? {‘x’: 0, ‘y’: 0} : document.move_target.posix, callback = document.call_down || function() { $(this.move_target).css({ ‘top’: e.pageY - posix.y, ‘left’: e.pageX - posix.x }); };callback.call(this, e, posix);
} }).mouseup(function(e) { if (!!this.move) { var callback = document.call_up || function(){}; callback.call(this, e); $.extend(this, { ‘move’: false, ‘move_target’: null, ‘call_down’: false, ‘call_up’: false }); } });var box= (‘#box’).mousedown(function(e) {
var offset = $(this).offset();this.posix = {‘x’: e.pageX - offset.left, ‘y’: e.pageY - offset.top+45};
.extend(document, {‘move’: true, ‘move_target’: this}); }).on(‘mousedown’, ‘#coor’, function(e) { var posix = { ‘w’:box.width(), ‘h’: $box.height(), ‘x’: e.pageX, ‘y’: e.pageY };// 按下鼠标时获取对象宽高及鼠标位置.extend(document, {‘move’: true, ‘call_down’: function(e) { box.css({
‘width’: Math.max(30, e.pageX - posix.x + posix.w), ‘height’: Math.max(30, e.pageY - posix.y + posix.h) });//更改对象宽高 }}); return false; }); });//页面加载完成
$(document).ready(function(){ //禁止退格键 作用于Firefox、Opera document.onkeypress = banBackSpace; //禁止退格键 作用于IE、Chrome document.onkeydown = banBackSpace; }); //处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外 function banBackSpace(e){ //alert(event.keyCode) var ev = e || window.event;//获取event对象 var obj = ev.target || ev.srcElement;//获取事件源 var t = obj.type || obj.getAttribute(‘type’);//获取事件源类型 //获取作为判断条件的事件类型 var vReadOnly = obj.readOnly; var vDisabled = obj.disabled; //处理undefined值情况 vReadOnly = (vReadOnly == undefined) ? false : vReadOnly; vDisabled = (vDisabled == undefined) ? true : vDisabled; //当敲Backspace键时，事件源类型为密码或单行、多行文本的， //并且readOnly属性为true或disabled属性为true的，则退格键失效 var flag1 = ev.keyCode == 8 && (t == “password” || t == “text” || t == “textarea”) && (vReadOnly == true || vDisabled == true); //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效 var flag2 = ev.keyCode == 8 && t != “password” && t != “text” && t != “textarea”; //判断 if (flag2 || flag1) event.returnValue = false;//这里如果写 return false 无法实现效果 }转载地址：http://bddwb.baihongyu.com/