【前端学习笔记】深入学习Javascript:EVENT应用

[code]onmousedown : 选择元素
onmousemove : 移动元素
onmouseup   : 释放元素

拖拽事件结构

[code]oDiv.onmousedown = function(ev) {
            var ev = ev || event;
            var disX = ev.clientX - this.offsetLeft;//鼠标到div左边的距离
            var disY = ev.clientY - this.offsetTop;//鼠标到div上边的距离

            document.onmousemove = function(ev) { 
            //对象是document不会因为拖动太快鼠标脱离元素而停止拖拽
                var ev = ev || event;
                oDiv.style.left = ev.clientX - disX + 'px';
                oDiv.style.top = ev.clientY - disY + 'px';
            }
            document.onmouseup = function() {
            //对象是document，不会因为拖动到层级比oDiv元素高的元素时，oDiv对应的鼠标抬起事件绑定的函数失效
                document.onmousemove = document.onmouseup = null;
            }

        }

[code]1.拖拽的时候，如果有文字被选中，会产生问题
    原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果
        解决：
            标准：阻止默认行为 在onmousedown事件绑定函数的末尾加上 return false;
            非标准ie：全局捕获 oDiv.setCapture()把全局发生的onmousemove事件强制捕获到oDiv身上，干掉浏览器默认行为，
            然后在onmouseup事件的时候再全局释放，oDiv.releaseCapture()
2.拖拽图片会有问题，原因，解决的办法同上

    setCpature解析：

    设置全局捕获 ，
    当我们给一个元素设置全局捕获以后，那么这个元素就会
    监听后续发生的所有事件，当有事件发生的时候，就会被
    当前设置了全局捕获的元素所触发

    在各浏览器的存在情况
    ie : 有，并且有效果
    ff : 有，但是没效果
    chrome : 没有  
    所以标准下还是用return false;来阻止浏览器默认行为

[code]function drag(obj){

            obj.onmousedown = function(ev) {
            var ev = ev || event;

            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;

            if ( obj.setCapture ) {
                obj.setCapture();
            }

            document.onmousemove = function(ev) {
                var ev = ev || event;

                obj.style.left = ev.clientX - disX + 'px';
                obj.style.top = ev.clientY - disY + 'px';
            }

            document.onmouseup = function() {
                document.onmousemove = document.onmouseup = null;
                //释放全局捕获 releaseCapture();
                if ( obj.releaseCapture ) {
                    obj.releaseCapture();
                }
            }

            return false;

        }

    }