• 事件详解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 {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

  • 相关阅读:
    IOS 开发小技巧总结
    iOS空心圆下载进度指示器控件
    Undefined symbols for architecture arm64:
    聊天气泡 button backgroundImage uiimage 拉伸 stretchableImageWithLeftCapWidth: 方法的使用
    NSDateFormatter 时间格式转换
    no identity found Command /usr/bin/codesign failed with exit code 1 报错解决方法
    Javascript 事件对象(二)event事件
    Javascript 事件(一)
    Javascript DOM基础(二) childNodes、children
    Javascript DOM基础(一)概念
  • 原文地址:https://www.cnblogs.com/eveblog/p/4503449.html
Copyright © 2020-2023  润新知