事件基础---终

默认行为

•什么是默认行为

l阻止表单默认行为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oForm=document.getElementById('form1');
    //表单提交是运行函数
    oForm.onsubmit=function ()
    {
        return false;
    };
};
</script>
</head>

<body>
<form id="form1" action="http://www.miaov.com/">
    <input type="submit" />
</form>
</body>
</html>

Stop from .

•普通写法：return false;

oncontextmenu 浏览器右击属性

•例子1. 屏蔽右键菜单

–弹出自定义右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.oncontextmenu=function ()
{
    return false;
};
</script>
</head>

<body>
</body>
</html>

Out Right of

•例子2. 只能输入数字的输入框

–keydown、keyup事件的区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oTxt=document.getElementById('txt1');
    
    oTxt.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        //alert(oEvent.keyCode);
        
        //0        48
        //9        57
        //退格    8
        
        if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
        {
            return false;
        }
        
        //return false;
    };
};
</script>
</head>

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

number on text

简易拖拽

•拖拽原理

–距离不变

–三个事件

#div1 {100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<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;
        
        oDiv.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oDiv.style.left=oEvent.clientX-disX+'px';
            oDiv.style.top=oEvent.clientY-disY+'px';
        };
        
        oDiv.onmouseup=function ()
        {
            oDiv.onmousemove=null;
            oDiv.onmouseup=null;
        };
    };
};
</script>
</head>

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

mouse drag

l靠谱拖拽

•原有拖拽的问题

–直接给document加事件

•FF下，空Div拖拽Bug

–阻止默认事件

•防止拖出页面

–修正位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#div1 {100px; height:100px; background:red; position:absolute;}
</style>
<title>mouse drag</title>
<script>
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var disX=0;
    var disY=0;
    oDiv.onmousedown=function(ev)
    {
        var oEvent=ev||event;
        //客户端的xy坐标-浏览器左边缘=div内部鼠标点击的地方离div的边框距离
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
                
     document.onmousemove=function(ev)
  {
         var oEvent=ev||event;
         //客户端的xy坐标减去div内部鼠标点击的地方离div的边框距离
        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
            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';
            
         }
        document.onmouseup=function ()
        {
            //鼠标抬起后清空事件
            document.onmousemove=null;
            document.onmouseup=null;
        };
         return false; 
    };
};
</script>
</hea

mouse drag2

知识点

l阻止默认事件

l拖拽