一、默认行为
浏览器自身所带的行为,譬如,右键菜单(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事件,可清可不清
};
};