JS学习笔记 - 自定义右键菜单、文本框只能输入数字

 

<script>
    // 事件总共有2个部分，
    //1.点击鼠标右键的表现 oncontextmenu   2.点击鼠标左键的表现（即普通点击onclick）
    // 点击右键，div位置定位到鼠标所在位置， 且阻止鼠标右键的默认菜单
    // 点击左键（即普通的onclick点击），div消失。

    document.oncontextmenu=function (ev)
// oncontextmenu  点击右键触发
{
    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 ()
// onclick 正常点击时触发 （鼠标左键，任意点击页面）
{
    var oDiv=document.getElementById('div1');
    
    oDiv.style.display='none';
};
</script>

 

自定义右键菜单，错误记录

<style>
    *{margin:0;padding:0; list-style: none;}
    #div1{
        background-color: #ccc;
        border: 1px solid #000;
        width: 80px;
        display: none;

        position:absolute;
        /* CSS没写绝对定位，就不能移动！！！不要再忘记了！！！*/
    }
    </style>

    <script>

    function getPos(ev) //这个函数的先后顺序有区别吗？
    {
        // 这里没有涉及到移出当前屏幕的滚动条情况。
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

        //var oEvent = ev||event; 
        // 这个oEvent 应该是其他事件调用这个函数时使用，不是封装函数本身里的。

        // return{x:oEvent.clientX + scrollLeft, y:oEvent.clientY + scrollTop};
        return{x:ev.clientX + scrollLeft, y:ev.clientY + scrollTop}
    }

    document.oncontextmenu = function (ev)  // 这里没写ev!!!
    {
        //本条补写：
        var oEvent = ev||event;

        var oDiv = document.getElementById('div1');

         var pos = getPos(oEvent)

        // var pos = getPos(ev);  // 如果要调用getPos函数，这里括号里怎么表示？

        oDiv.style.display = 'block';
        oDiv.style.left = pos.x + 'px';
        oDiv.style.top = pos.y + 'px';

        return false;
    };

    document.onclick = function ()
    {
        var oDiv=document.getElementById('div1');
    
        oDiv.style.display='none';
    };

    </script>

 

    window.onload = function(){
        var oTxt = document.getElementById('txt1');

        oTxt.onkeydown = function(ev){
        //document.onkeydown = function(ev)  //应该是给文本框加事件，不是document
        // onkeydown这个事件不只是document可以用，在哪里按键盘了就在哪用。     

            var oEvent = ev||event;

         if(oEvent.keyCode!=8 && oEvent.keyCode<49 || oEvent.keyCode>57)
            {
                return false;
            }
        };
    }