事件详解2

默认行为

•什么是默认行为
不需要自己去编写，浏览器本身就具备的功能
如：在空白页面点击鼠标右键出现菜单
 
l阻止默认行为
•普通写法：return false;
•例子1.  屏蔽右键菜单
document.oncontextmenu=function ()
{
    return false;
};

同理，阻止表单提交onsubmit、阻止onkeydown

–弹出自定义右键菜单

<!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>
<style>
* {margin:0; padding:0;}
#ul1 {width:100px; background:#CCC; border:1px solid black; position:absolute; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.oncontextmenu=function (ev)
{
    var oEvent=ev||event;
    var oUl=document.getElementById('ul1');
    
    oUl.style.display='block';
    oUl.style.left=oEvent.clientX+'px';
    oUl.style.top=oEvent.clientY+'px';
    
    return false;
};

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

<body>
<ul id="ul1">
    <li>登陆</li>
    <li>回到首页</li>
    <li>注销</li>
    <li>加入VIP</li>
</ul>
</body>
</html>
View Code

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

<!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>
View Code

–keydown、keyup事件的区别

 

简易拖拽
•拖拽原理
距离不变
三个事件 onmousedown 、onmousemove、onmouseup
 
靠谱拖拽

<!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>
<style>
#div1 {width: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;

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;//FF下，空Div拖拽Bug
};
};
</script>
</head>

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

注意问题

•拖拽的问题
–直接给document加事件
•FF下，空Div拖拽Bug
–阻止默认事件
•防止拖出页面

修正位置

 

总结：

1. 什么是事件的默认行为
2. 上下文菜单：oncontextmenu
3. 文本框内禁止输入内容实例
4. 自定义右键菜单实例
5. 只能输入数字的输入框实例：onkeydown、onkeyup
6. 拖拽实例：拖拽原理、三个事件、document范围、解决FF的bug
7. 限制拖拽范围的条件：document.documentElement.clientWidth

posted @ 2015-05-14 15:22  Eve0803  阅读(131)  评论(0)  编辑  收藏  举报