JS事件中级

一、默认行为
浏览器自身所带的行为，譬如，右键菜单（oncontextmenu），通过返回false，清除右键菜单。
二、阻止默认
①普通写法：return false；

实例：①屏蔽右键菜单，弹出自定义菜单
②只能输入数字的输入框

实例1

        var div1 = document.getElementById('div1');
        document.oncontextmenu = function(e){
        var oEvent = e ||event;
        div1.style.display = 'block';
        div1.style.left = oEvent.clientX +'px';
        div1.style.top = oEvent.clientY +'px';
        return false;
    };
    document.onclick = function(e){
        var oEvent = e ||event;
        div1.style.display  = 'none';

    }

实例2

var text1 = document.getElementById(‘text1’);

    text1.onkeydown = function(e){
        var oEvent = e ||event;      
        if(oEvent.keyCode!=8 &&oEvent.keyCode< 48|| oEvent.keyCode>57){
            return false;
        }
    };

需要注意的有：①对每一个输入的字符都要进行判断，对input改变value监听比较困难，因为要对每次输入的每个字符都进行判断，要进行循环，要进行value的数值类型判断，所以，在这里，可以对键盘输入进行监听，毕竟数字键就10个，找到对应的键盘值进行判断容易的多。0是48,9是57，在此区间就是属于数字的。
②keycode ==8 为删除键

三、onmousedown、onmousemove 、onmouseup
鼠标点击、移动、抬起的事件
实例：小方块的拖拽
注意事项：①要求小方块不能拖出浏览器界限外。解决：修正位置，得出l = oEventclientX - disX ，要求左右距离都不能脱离浏览器，即l在0 ~（）可视区距离-div宽度）这个区间内。y轴方向同理
②拖拽速度过快会出现脱离的情况。解决：把鼠标移动事件加在document上，无论速度多快document都能检测到。
③在拖拽过程中，一共是三个事件，在鼠标按下的情况下，再进行拖动，这是在onmousedown语句中加入onmousemove语句。

var div1 = document.getElementById('div1');
    var disX =0,
        disY = 0;

    div1.onmousedown = function(e){
        var oEvent = e ||event;
        disX = oEvent.clientX - div1.offsetLeft;
        disY = oEvent.clientY - div1.offsetTop;

        document.onmousemove= function(e){
            var oEvent = e ||event;
            var l = oEvent.clientX-disX; //取出值便于后续的判断
            var t = oEvent.clientY-disY;

            if( l<0){
                l = 0;//不能超出左边界
            }else if(l> document.documentElement.clientWidth -div1.offsetWidth){
                l= document.documentElement.clientWidth -div1.offsetWidth;//不能超出右边界
            }
            if(t<0){
                t= 0;//不能超出上边界
            }else if(t> document.documentElement.clientHeight -div1.offsetHeight){
                t = document.documentElement.clientHeight -div1.offsetHeight;//不能超出下边界
            }


            div1.style.left=l+'px';
            div1.style.top= t+'px';
        };
        document.onmouseup = function(){
           document.onmousemove= null;//清空move事件
           document.onmouseup = null;//清空up事件，可清可不清
         };
    };