js属性部分

offset 部分

offset 自己的

目的：js 中有一套方便的获取元素尺寸的方法就是offset

常用：

offsetWidth offsetHeight

得到对象的宽度和高度（自己的，与他人无关）

offsetWidth = width+border +padding

例如：

div{ width:220px ; border-left:2px solid red; padding: 10px;}

div.offsetWidth=22

0....0+2+20

 

offsetLeft offsetTop

返回距离上级盒子（带有定位）左边的位置

如果父级都没有定位则以body 为准

这里的父级指的是所有上一级 不仅仅所指父类

offsetLeft 从父类的padding 开始算 父类border 不算

总之：子类容器到被定位的符类容器边框到边框的距离

 

offsetParent

返回对象父级（带有定位）

如果当期元素的父级元素没有进行css 定位（position 为 absolute 或者 relative）,offsetParent 为body

反之，如果当期元素的父级元素有ss 定位（position 为 absolute 或者 relative）,offsetParent取最近的那个父级元素

 

offsetTop 与 style.top 的区别

最大的区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置，而style.top 不可以

只有定位的容器才有left top right

 

offsetTop 返回的是数字，而style.top 返回的是字符串，除了数字外还有带单位：px

事件以及对象

btn.οnclick=function(event){语句}

event :就是事件的意思

event 的常见属性

var event=event||window.event;//兼容写法

console.log(event.clientX);

console.log(event.clientY);

 

data	返回拖拽对象的URL字符串（dragDrop）
width	该窗口或框架的高度
height	该窗口或框架的高度
pageX	光标相对于该网页的水平位置（ie无）
pageY	光标相对于该网页的垂直位置（ie无）
screenX	光标相对于该屏幕的水平位置
screenY	光标相对于该屏幕的垂直位置
target	该事件被传送到的对象
type	事件的类型
clientX	光标相对于该网页的水平位置 （当前可见区域）
clientY	光标相对于该网页的水平位置

 

pageX clientX screenX 的区别

screenX ,screenY

是以电脑屏幕为基准点 测量

pageX pageY （ie678 不兼容）

以我们的文档（局对定位）的基准点对其

 

clientX cilent Y

以可视区域为基准点 类似于 相对定位

 

onmouseup 当鼠标弹起

onmousedown 当鼠标按下

 

防止选择拖动 过界

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/3551337/blog/1036983