• 19,事件中级,默认事件,renturn false,拖拽,onmousedown,onmousemove,onmouseup


    浏览器自带的事件,默认事件:右键弹出菜单,按下键盘窗口显示相应字符;

    阻止默认事件:return false;

    键盘事件:onkeydown,onkeyup,onkeypress;

    点击鼠标相关事件:onclick ,onmousedown,onmousemove,onmouseup;

    右键:document.oncontextmenu;

    自定义鼠标右键菜单:

    用document.oncontextmenu事件(即上下文菜单),点击后div在鼠标位置显示oEvent.clientX,oEvent.clientY,阻止右键默认菜单return false;return false 要放在自定义的最后;

    在窗口任意处左击document.onclick,div消失display='none';

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

    只能输入数字的输入框:

    判断如果oEvent.keyCode 在数字按钮对应码之外的,且按下的键不为backspace.则阻止默认行为return false ;

    用oTxt1.onkeydown,(猜测keyCode一般在按下键盘的时候返回,所以不用onkeypress二用onkeydown),oTxt1,因为是在输入框中获取焦点的。

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

    拖拽:

    三步:onmousedown,onmousemove,onmouseup;

    down:确定鼠标点击处分别与div左边,上边的距离,disX=oEvent.clientX-oDiv.offsetLeft;disY=oEvent.clientY-oDiv.offsetTop;

    move:包含在down里面,意为点击后才移动,为防止鼠标移出div,故用document.onmousemove;div的位置是:鼠标位置-disX/disY;

    up:document.onmouseup;清除移动和鼠标抬起;document.onmousemove=null;document.onmouseup=null;也是包含在move里;

    判断div距窗口四边的距离,使不移出窗口;

    窗口的宽度用:document.documentElement.clientWidth;

        高度:document.documentElement.clientHeight;

    <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>
    View Code
  • 相关阅读:
    [PHP]AES加密----PHP服务端和Android客户端
    [PHP]memcache安装
    [Android]apk反编译方法
    [PHP]生成随机数(建立字典)
    [PHP]Mysql的运用
    [PHP]对象数组和普通数组总结
    ThinkPHP5+Redis单例型购物车
    移动硬盘新建选项消失、不能新建文件夹和文件的解决方案
    PHP substr() 函数截取中文字符串乱码
    php开发中遇到问题的找错误的方法
  • 原文地址:https://www.cnblogs.com/maoduoduo/p/3169540.html
Copyright © 2020-2023  润新知