鼠标事件的详细说明

2018-06-24 01:15:35来源：未知阅读 ()

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
            
 // onClick 　　鼠标点击事件，多用在某个对象控制的范围内的鼠标点击-[点击]
 // onDblClick 　　鼠标双击事件-[双击]
 // onMouseDown 　　鼠标上的按钮被按下了-[按下]
 // onMouseMove　　 鼠标移动时触发的事件-[移动]
 // onMouseUp 　　鼠标按下后，松开时激发的事件-[松开]
 // onMouseOver　　 当鼠标移动到某对象范围的上方时触发的事件-[移入]
 // onMouseOut 　　当鼠标离开某对象范围时触发的事件-[移出]
 // onKeyPress　　 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
 // onKeyDown 　　当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
 // onKeyUp　　    当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

 // 鼠标拖拽先down ，后move，最后up，而不是先down ，后over，最后out。
        window.onload = function(){
            var oBox = document.getElementById('box');
            
            oBox.onmousedown = function(ev){
                var ev = ev || event,
                    disX = ev.clientX - this.offsetLeft,
                    disY = ev.clientY - this.offsetTop;
                
                
                document.onmousemove = function(ev){
                    var ev = ev || event;
                    oBox.style.left = ev.clientX - disX + 'px';
                    oBox.style.top = ev.clientY - disY + 'px';
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
                //return false
            }
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>