2010年11月16日随笔档案 - dengwf

2010年11月16日

层的移动本来很简单，用jquery插件或者自己写一个也不难，但是最近一个ipad项目里，发现用手移动div会感觉很卡，体验很差（可能是ipad的配置根不上pc）。同样如果一个页面结构很复杂或者电脑配置不好的话也会出现这种情况。为了弄清变慢的原因，我们做了几个demo对比，最后发现在mousemove事件上加上定时器能改进这个体验。

整个代码的关键地方在于当鼠标按下时开始了的计时器，这样Onmousemove事件会每隔30ms执行一次，然后在鼠标松下的时候清除计时器。

timer=setInterval(function(){flag=true;},30);

这样可以减轻浏览器绘制div层的负担，不至于拖动时每时每刻都在移动，其实太短了人眼也感觉不到变化，延迟间隔可以自己根据体验设置。

代码

function Endrag(source,target){
    source=typeof(source)=="object" ? source:document.getElementById(source);
    target=typeof(target)=="object" ? target:document.getElementById(target);
    var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100;
    var timer,flag=false;
    var i=0;

    source.onmousedown=function(e){
        e = e ? e : (window.event ? window.event : null);

        x0 = e.clientX ;
        y0 = e.clientY ;
        x1 = isNaN(parseInt(source.style.left))?0:parseInt(source.style.left);
        y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top);
        moveable = true;

        //当鼠标按下时，定时器开始工作，每隔50ms执行一次mousemove事件
        timer=setInterval(function(){flag=true;},30);

    };
    //拖动;
    source.onmousemove=function(e){

        e = e ? e : (window.event ? window.event : null);
        if(moveable){

            if(flag){
                i++;

                flag=false;
                target.style.left = (e.clientX + x1 - x0 ) + "px";
                target.style.top  = (e.clientY + y1 - y0 ) + "px";

            }

        }

    };
    //停止拖动;
    source.onmouseup=function (e){
        if(moveable)  {

            moveable = false;
            clearInterval(timer);
            //alert(i);

        }
    };

    //停止拖动;
    source.onmouseout=function (e){
        if(moveable)  {

            moveable = false;
            clearInterval(timer);
            //alert(i);

        }
    };


}

posted @ 2010-11-16 14:14 dengwf 阅读(157) 评论(1) 编辑

javascript中的事件冒泡

dom结构里，点击子元素后，点击事件会自动向其上层父元素传递，直至document。刚开始看到这个理论觉得很奇怪，后来细想一下，这是必须的。比喻我们在document上绑定了一个事件，我们怎么触发呢，就是在页面上随便位置点一下就行了，那么我们点的这个位置可能是一个div，或者是一个p，如果没有事件传播，dccument就不会触发这个事件了。

阻止事件冒泡

什么时候要用到阻止事件冒泡，当页面结构比较复杂时，阻止冒泡可以提高页面性能，如果你只想在当前dom上执行事件的话，没必要让他传递到父层上去。另外在平时用到比较多的popup也会用到这个，弹出一个层div1，当点击除弹出层外的其它位置时，关闭这个popup。如果打算在document上绑定这个close事件时，那就需要在div1上阻止单击事件的冒泡，否则点击了div1也会关闭这个Popup，因为事件会冒泡到document。

IE：

window.event.cancelBubble = true

FF：

e.stopPropagation()

http://www.liloy.info/archives/103.html

http://www.liloy.info/archives/131.html

posted @ 2010-11-16 10:10 dengwf 阅读(89) 评论(1) 编辑