默认行为：右键菜单、拖拽

最新推荐文章于 2024-03-23 01:24:48 发布

o0o0o0o0o0oo

最新推荐文章于 2024-03-23 01:24:48 发布

阅读量127

点赞数

本文链接：https://blog.csdn.net/o0o0o0o0o0oo/article/details/106965002

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

默认行为

oncontextmenu 右键菜单

例子1:屏蔽右键菜单
<script>
document.oncontextmenu=function ()
{
	return false;	//阻止默认事件
};
</script>

例子2:自建右键菜单

<style>
* {margin:0; padding:0; list-style:none;}
#div1 {position:absolute; width:80px; background:#CCC; border:1px solid black; display:none;}
</style>
<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>
</head>

<body>
<div id="div1">
	<ul>
    	<li>aaa</li>
    	<li>bbb</li>
    	<li>ccc</li>
    	<li>ddd</li>
    </ul>
</div>
</body>

onkeydown 当用户按下键盘按键时触发。（兼容所有浏览器）
onkeyup 当用户释放键盘按键时触发。
onkeypress 当键盘按键被按下并释放一个键时发生。

例子：只能输入数字的文本框

<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>
</head>

<body>
<input type="text" id="txt1" />
</body>

拖拽div

<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	var disX=0;
	var disY=0;
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		
		//鼠标跟div块边界的距离
		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;
			
			//将div块锁在可视区内
			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>
</head>

<body>
<div id="div1"></div>
</body>

o0o0o0o0o0oo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
默认行为：右键菜单、拖拽

默认行为oncontextmenu 右键菜单例子1:屏蔽右键菜单<script>document.oncontextmenu=function (){ return false; //阻止默认事件};</script>例子2:自建右键菜单<style>* {margin:0; padding:0; list-style:none;}#div1 {position:absolute; width:80px; background:#CCC;
复制链接

扫一扫

专栏目录