前端随心记---------Javascript系列（第十四节.拖拽。鼠标scroll。offset）

拖拽:

事件: onmousedown onmousemove onmouseup
1.首先需要为拖拽的对象添加一个onmousedown事件
记录: 鼠标点击某个对象的内部偏移量
var disc=e,offsetX || e.layerX(火狐使用
var disc=e.offsetY || e.layerY(火狐使用
2.鼠标在文档上移动:
要想让操作的元素动起来,该元素必须有定位
移动的过程,实际上改变的是元素的left和top值
3.停止移动,需要触发onmouseup事件
鼠标抬起时,取消移动document.onmousemove=null;

拖拽时去掉文字内容选中兼容

 window.getSelection ? window.getSelection( ).removeAllRanges( ):document.selection.empty( );
     ie: document.selection.empty( );
     
     高版本浏览器:window.getSelection( ).removeAllRanges( );

scroll家族属性

scrollTop :页面垂直方向滚走的距离
scrollLeft : 页面水平方向滚走的距离

window.onscroll事件

   window.onscroll = function( ) {
        document.documentElement.scrollTop || document.body.scrollTop (兼容没有<!DOCTYPE html>声明的页面)
        }
  document.documentElement.scrollTop=document.body.scrollTop=300 ;  可读写;

offset家族属性

offsetWidth 包含边框和内边距
clientWidth 不包含边框包含内边距
offsetHeight
clientHeight
offsetLeft 相对定位时为父元素左边距离
offsetTop

导航固定顶部函数scrooll

在窗口的滚动条事件.
window.scroll=function{   
        var  stop=document.documentElement.scrolltop || doucumen.body.scrolltop;
        if(stop>190){
            nav.style.position="fixed";
            nav.style.top=0;
            else{nav.style.position=static;}
            }
           }

集思广益，仅供学习，侵权即删！！