zoukankan html css js c++ java

Javascript Event

获取鼠标坐标

<script>
window.onload = function(){
    document.onclick = function(ev){
        var oEvent = event || ev;
        alert(oEvent.clientX + "," + oEvent.clientY);
    }
};
</script>

事件冒泡

<!DOCTYPE HTML>
<html onclick="alert('html');">
<head>
<meta charset="utf-8">
<style>
div {padding:100px;}
</style>
</head>

<body onclick="alert('body');">
<div style="background:#CCC;" onclick="alert(this.style.background);">
    <div style="background:green;" onclick="alert(this.style.background);">
        <div style="background:red;" onclick="alert(this.style.background);">
        </div>
    </div>
</div>
</body>
</html>

阻止事件冒泡

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:400px; height:300px; background:#CCC; display:none;}
</style>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');
    
    oBtn.onclick=function (ev)
    {
        var oEvent=ev||event;
        
        oDiv.style.display='block';
        //alert('按钮被点击了');
        
        oEvent.cancelBubble=true;
    };
    
    document.onclick=function ()
    {
        oDiv.style.display='none';
        //alert('document被点击了');
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>

鼠标坐标，让div跟随鼠标移动

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    
    oDiv.style.left=oEvent.clientX+'px';
    oDiv.style.top=oEvent.clientY+'px';
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

但是如果这时候页面有滚动条的话，移动滚动条后div就不会跟随鼠标了，于是我们加上scrollTop

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    
    oDiv.style.left=oEvent.clientX+'px';
    oDiv.style.top=oEvent.clientY+scrollTop+'px';
};
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

每次我们用到clientX和clientY的时候我们都要记得给它们加上scrollLeft和scrollTop，既然如此我们干脆将这个方法抽象出来。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    var pos=getPos(oEvent);
    
    oDiv.style.left=pos.x+'px';
    oDiv.style.top=pos.y+'px';
};
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

一串跟随鼠标的div

原理：后一个div跟着前一个div走，第一个div跟着鼠标走

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var aDiv=document.getElementsByTagName('div');
    var oEvent=ev||event;
    
    var pos=getPos(oEvent);
    
    for(var i=aDiv.length-1;i>0;i--)
    {
        aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
        aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    }
    
    aDiv[0].style.left=pos.x+'px';
    aDiv[0].style.top=pos.y+'px';
};
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

键盘事件

keyCode

<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    
    alert(oEvent.keyCode);
};
</script>

键盘控制div左右移动

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    
    if(oEvent.keyCode==37)
    {
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }
    else if(oEvent.keyCode==39)
    {
        
        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

提交留言

基本布局

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<input id="txt1" type="text" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>

按回车提交

<script>
window.onload=function ()
{
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');
    
    oTxt1.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.keyCode==13)
        {
            oTxt2.value+=oTxt1.value+'
';
            oTxt1.value='';
        }
    };
};
</script>

按ctrl+回车提交

<script>
window.onload=function ()
{
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');
    
    oTxt1.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.keyCode==13 && oEvent.ctrlKey)
        {
            oTxt2.value+=oTxt1.value+'
';
            oTxt1.value='';
        }
    };
};
</script>

获取鼠标坐标

<script>
window.onload = function(){
    document.onclick = function(ev){
        var oEvent = event || ev;
        alert(oEvent.clientX + "," + oEvent.clientY);
    }
};
</script>

事件冒泡

<!DOCTYPE HTML>
<html onclick="alert('html');">
<head>
<meta charset="utf-8">
<style>
div {padding:100px;}
</style>
</head>

<body onclick="alert('body');">
<div style="background:#CCC;" onclick="alert(this.style.background);">
    <div style="background:green;" onclick="alert(this.style.background);">
        <div style="background:red;" onclick="alert(this.style.background);">
        </div>
    </div>
</div>
</body>
</html>

阻止事件冒泡

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:400px; height:300px; background:#CCC; display:none;}
</style>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');
    
    oBtn.onclick=function (ev)
    {
        var oEvent=ev||event;
        
        oDiv.style.display='block';
        //alert('按钮被点击了');
        
        oEvent.cancelBubble=true;
    };
    
    document.onclick=function ()
    {
        oDiv.style.display='none';
        //alert('document被点击了');
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>

鼠标坐标，让div跟随鼠标移动

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    
    oDiv.style.left=oEvent.clientX+'px';
    oDiv.style.top=oEvent.clientY+'px';
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

但是如果这时候页面有滚动条的话，移动滚动条后div就不会跟随鼠标了，于是我们加上scrollTop

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    
    oDiv.style.left=oEvent.clientX+'px';
    oDiv.style.top=oEvent.clientY+scrollTop+'px';
};
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

每次我们用到clientX和clientY的时候我们都要记得给它们加上scrollLeft和scrollTop，既然如此我们干脆将这个方法抽象出来。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    var pos=getPos(oEvent);
    
    oDiv.style.left=pos.x+'px';
    oDiv.style.top=pos.y+'px';
};
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

一串跟随鼠标的div

原理：后一个div跟着前一个div走，第一个div跟着鼠标走

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var aDiv=document.getElementsByTagName('div');
    var oEvent=ev||event;
    
    var pos=getPos(oEvent);
    
    for(var i=aDiv.length-1;i>0;i--)
    {
        aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
        aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    }
    
    aDiv[0].style.left=pos.x+'px';
    aDiv[0].style.top=pos.y+'px';
};
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

键盘事件

keyCode

<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    
    alert(oEvent.keyCode);
};
</script>

键盘控制div左右移动

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    
    if(oEvent.keyCode==37)
    {
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }
    else if(oEvent.keyCode==39)
    {
        
        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

提交留言

基本布局

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<input id="txt1" type="text" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
</body>
</html>

按回车提交

<script>
window.onload=function ()
{
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');
    
    oTxt1.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.keyCode==13)
        {
            oTxt2.value+=oTxt1.value+'
';
            oTxt1.value='';
        }
    };
};
</script>

按ctrl+回车提交

<script>
window.onload=function ()
{
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');
    
    oTxt1.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.keyCode==13 && oEvent.ctrlKey)
        {
            oTxt2.value+=oTxt1.value+'
';
            oTxt1.value='';
        }
    };
};
</script>

===================更新与2015年12月20日==============

默认行为

阻止默认行为

<script>
document.oncontextmenu=function ()
{
    return false;    //阻止默认事件
};
</script>

自定义右键菜单

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
* {margin:0; padding:0; list-style:none;}
#div1 {position:absolute; width:80px; background:#CCC; border:1px solid black; display:none;}
</style>
<script>
document.oncontextmenu=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    
    oDiv.style.display='block';
    oDiv.style.left=oEvent.clientX+'px';
    oDiv.style.top=oEvent.clientY+'px';
    
    return false;
};

document.onclick=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.style.display='none';
};
</script>
</head>

<body>
<div id="div1">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>
</body>
</html>

只能输入数字的输入框

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload=function ()
{
    var oTxt=document.getElementById('txt1');
    
    oTxt.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        //alert(oEvent.keyCode);
        
        //0-    48
        //9-    57
        
        //如果 用户按的 不是退格 并且 也不是数字
        
        if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
        {
            return false;
        }
    };
};
</script>
</head>

<body>
<input type="text" id="txt1" />
</body>
</html>

拖拽

原理：

拖拽对象的div坐标始终和鼠标的坐标保持等量的距离

距离 = 鼠标坐标 - 窗口坐标

窗口坐标 = 鼠标坐标 - 距离

窗口的最小坐标为(0,0)，当窗口的坐标小于0时，要把窗口坐标强行归0

窗口的最大坐标 = 可视区域宽高 - 窗口宽高，当窗口坐标大于最大坐标时，要把窗口坐标强行限制在最大

为了防止鼠标移动过快造成窗口脱离鼠标控制，我们把mousemove事件绑定在document上，

当鼠标拖拽窗口抵达浏览器区域时窗口依然跟随鼠标，为了取消这个效果，我们把mouseup也绑定在document上，

为了回收垃圾，我们把已经失效的mousemove也设为null。

必须把mousemove和mouseup写在mousedown内，形成一个事件嵌套，

因为mousemove和mouseup都是从mousedown才开始的。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;
            
            if(l<0)
            {
                l=0;
            }
            else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
            {
                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            
            if(t<0)
            {
                t=0;
            }
            else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
            {
                t=document.documentElement.clientHeight-oDiv.offsetHeight;
            }
            
            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
        
        return false;
    };
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

事件绑定

attachEvent只适用于IE9-

addEventListner适用于IE9+、Chrome、FF

所以原生JS的事件绑定最好写一个抽象的兼容方法

<script>
function myAddEvent(obj, ev, fn)
{
    if(obj.attachEvent)
    {
        obj.attachEvent('on'+ev, fn);
    }
    else
    {
        obj.addEventListener(ev, fn, false);
    }
}

window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    
    myAddEvent(oBtn, 'click', function (){
        alert('a');
    });
    
    myAddEvent(oBtn, 'click', function (){
        alert('b');
    });
};
</script>

升级版拖拽

使得div不能被拖出指定对象（父容器）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:400px; height:300px; background:#CCC; position:relative;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;
            
            if(l<0)
            {
                l=0;
            }
            else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)
            {
                l=oDiv2.offsetWidth-oDiv.offsetWidth;
            }
            
            if(t<0)
            {
                t=0;
            }
            else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)
            {
                t=oDiv2.offsetHeight-oDiv.offsetHeight;
            }
            
            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
        
        return false;
    };
};
</script>
</head>

<body>
<div id="div2">
    <div id="div1"></div>
</div>
</body>
</html>

磁性吸附，把if(l<0)和if(t<0)改成l<50或者t<50

事件捕获

把事件都集中到捕获的主体上面进行响应

当我们点击浏览器内任意位置的时候，都相当于点击了button，结果都是弹一个a出来

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    
    oBtn.onclick=function ()
    {
        alert('a');
    };
    
    oBtn.setCapture();
};
</script>
</head>

<body>
<input id="btn1" type="button" value="按钮" />
</body>
</html>

setCapture()只在IE下兼容。。。

我们现在继续完善我们的拖拽程序，如果我们在拖拽的对象周围放上一些文字，会发现在拖拽的同时会选中文字，这个时候我们要将这些选中文字的事件捕获，把mousemove事件捕获到拖拽的对象上来，自然我们就会用到setCapture()，然而这个方法只对IE兼容，在Chrome和FF下，我们还是需要依靠return false禁用默认行为。代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
        
        if(oDiv.setCapture)
        {
            //IE
            oDiv.onmousemove=mouseMove;
            oDiv.onmouseup=mouseUp;
            
            oDiv.setCapture();
        }
        else
        {
            //Chrome、FF
            document.onmousemove=mouseMove;
            document.onmouseup=mouseUp;
        }
        
        function mouseMove(ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;
            
            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';
        }
        
        function mouseUp()
        {
            this.onmousemove=null;
            this.onmouseup=null;
            
            if(oDiv.releaseCapture)
            {
                oDiv.releaseCapture();
            }
        }
        
        return false;    //chrome、ff、IE9
    };
};
</script>
</head>

<body>
asdfasdfsdf<br>
dfasfasdfasd
<div id="div1">asdfasdfsdf<br>
dfasfasdfasd</div>
asdfasdfsdf<br>
dfasfasdfasd
</body>
</html>

带框拖拽

原理：

当mousedown时，添加一个绝对定位的border为虚线背景为透明的div，简称box

当mousemove时，box跟随鼠标移动

当mouseup时，拖拽对象坐标与box对齐，box消失

注意：

box的窗口大小要与原窗口大小一致

box的坐标要与原窗口坐标一致

坐标一致的时候要注意把border的像素一并减去，这样才是最精确的

代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
.box {border:1px dashed black; position:absolute;}
</style>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
        
        var oBox=document.createElement('div');
        
        oBox.className='box';
        oBox.style.width=oDiv.offsetWidth-2+'px';
        oBox.style.height=oDiv.offsetHeight-2+'px';
        
        oBox.style.left=oDiv.offsetLeft+'px';
        oBox.style.top=oDiv.offsetTop+'px';
        
        document.body.appendChild(oBox);
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;
            
            oBox.style.left=l+'px';
            oBox.style.top=t+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
            
            oDiv.style.left=oBox.offsetLeft+'px';
            oDiv.style.top=oBox.offsetTop+'px';
            
            document.body.removeChild(oBox);
        };
        
        return false;    //chrome、ff、IE9
    };
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

自定义滚动条

查看全文

相关阅读:
使用JNI技术实现JAVA程序调用dll
vim 技巧集
 Powershell：计算机硬盘扩容
 jira:3、API 调用 (jira insight)
Jira: 1、服务器搭建（测试环境）
Powershell ：AD 域操作之OU 导出、创建、用户导出、创建、移动OU
jira ：数据库配置要求
 powershell:定期删除指定目录的文件
 Jira：2、创建API 访问Token
证书：常见操作记录

原文地址：https://www.cnblogs.com/zcynine/p/5087425.html