阻止浏览器默认行为和拖拽



阻止浏览器默认行为
            e.preventDefault()
            e.returnValue = false

            e.preventDefault ? e.preventDefault() : (e.returnValue = false)

            return false
       
        e.clientX
        e.clientY
            包含在大部分的鼠标事件中，指针距离浏览器窗口的左 上 距离

        e.screenX
        e.screenY
            距离屏幕的左 上 距离

        e.pageX
        e.pageY
            指针距离文档左 上 距离
            因为有兼容问题，所以需要替代
                e.clientY + scrollTop
                e.clientX + scrollLeft

       
        form.onsubmit = function(){} 表单提交事件

        document.onscroll = function(){}  滚动条滚动事件

        兼容scrollTop
            var doc = document.body.scrollTop ? document.body : document.documentElement;
            console.log(doc.scrollTop)

        判断滚动条滚动的方向
            //1 声明一个变量_top = 0;
            //2 绑定事件
                document.onscroll = function(){
                    // 3 判断_top和当前scrollTop的大小
                    if(doc.scrollTop > _top){
                        // 向下
                    }else{
                        // 向上
                    }
                    // 4 _top赋值
                    _top = doc.scrollTop;
                }

        拖拽 
            鼠标点下
                获取鼠标点下的位置坐标
                获取元素left top 值
                求差
           
                绑定move事件
                    获取当前的鼠标的坐标
                    计算要设置的left top值
                        当前坐标减去上一步求得差
                    设置给元素
                绑定up事件
                    解绑move事件
                    解绑up事件

        当滚动条向下滚动时，图片跟着向上缓慢走（设置背景图的background-position-y）
        当滚动条向上滚动式，图片跟着向下缓慢走