JS中的默认行为-CSDN博客

默认行为

一默认行为

1什么是默认行为：说白了，就是浏览器自带的功能，比如网页右键自动弹出菜单。在输出框中敲击键盘，自动输出敲击的数值，这些都是默认行为

document.οncοntextmenu=function oncontextmenu作用是点击右键，呼叫右键菜单的时候

2怎么阻止默认行为

document.oncontextmenu=function()

{

return false;

}

</script>.

给这个函数弄一个返回值 false就是拒绝默认行为

3把默认行为拒绝掉，但是不拒绝自己设置的菜单

<!DOCTYPE html>

<html>

<head>

<style>

#div1{

background: red;display:none;position:absolute;width:80px;

}

</style>

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>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

4只能输入数字的输入框例子

keydown 键盘按下 keyup键盘按下之后又松开

<!DOCTYPE html>

<html>

<head>

window.onload=function()

{

var oTxt=document.getElementById('text1');

oTxt.onkeydown=function(ev)//键盘按键抬起时

{

var oEvent=ev||event;

//alert(oEvent.keyCode)

if(oEvent.keyCode<48 || oEvent.keyCode>57)

{

return false;

}

};

}

</script>

</head>

<body>

</body>

</html>

二拖拽

拖拽：就是你点击一个框一直点击不松手可以跟着鼠标移动而移动

整体代码：

<!DOCTYPE html>

<html>

<head>

<style>

#div1{

background: red;

width:100px;

height:100px;

position:absolute;

}

</style>

window.onload=function()

{

var disX=0;

var disY=0;

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

document.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;

oDiv.style.left=l+'px'

oDiv.style.top=t+'px'

}

document.onmouseup=function()

{

document.onmousemove=null;

document.onmouseup=null;

};

return false;//火狐有一个默认行为，这里取消掉

};

}

</script>

</head>

<body>

</body>

</html>

但是在火狐浏览器下会有一个bug，你点一次拖拽没问题，第二次拖拽会有一个阴影，这是火狐浏览器的bug，只要关闭默认行为就可以了

return false;

但是还有一个小问题，就是有的人会把拖拽框拖到网页以外，然后就找不到了，怎么办呢。用下面代码解决

把document.onmousemove=function(ev)这个函数改成如下：

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'

}

本文转自新网学会 51CTO博客，原文链接：http://blog.51cto.com/xwxhvip/1983878 ，如需转载请自行联系原作者