JS事件

最新推荐文章于 2024-06-10 17:00:16 发布

smj-sunny

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量233

点赞数

分类专栏： JavaScript 文章标签： JavaScript Event

本文链接：https://blog.csdn.net/username__sunny/article/details/88872323

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

给页面添加一个右键点击显示自定义菜单事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin: 0; padding: 0; list-style: none;}
	#div1{position: absolute;width: 80px;background: #CCC;border: 1px solid black; display: none;}
	</style>
	<script type="text/javascript">
		//设置浏览器的右键菜单----div1是自定义菜单
		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>dddd</li>
			<li>cccc</li>
			<li>xxxxx</li>
		</ul>
	</div>

</body>
</html>

给文本输入框添加输入限制条件，如只能输入数字和退格键，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">

	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oTxt=document.getElementById('txt1');
			oTxt.onkeydown=function(ev){
				var oEvent=ev||event;
				//alert(oEvent.keyCode);//用以测试0-9按键的keycode
				if(oEvent.keyCode!=8 && oEvent.keyCode<96 || oEvent.keyCode>105){
					return false;//如果按下的按键不是0-9并且不是退格键则取消浏览器的默认设置
				}
			}
		}
	</script>
</head>
<body>
	<input type="text" id='txt1' name="">
</body>
</html>

拖拽事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div1{width: 100px;height: 100px;background: green;position: absolute;}

	</style>
	<script type="text/javascript">
	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||evet;
				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;
				}
				//计算div移动时的位置
				oDiv.style.left=l+'px';
				oDiv.style.top=t+'px';
			}
			document.onmouseup=function(ev){
				//当鼠标抬起时，取消mousemove和mouseup事件
				document.onmousemove=null;
				document.onmouseup=null;
			}
			return false;//解决Firefox拖动空div出现的问题
		}
	}
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

smj-sunny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS事件

给页面添加一个右键点击显示自定义菜单事件<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml...
复制链接

扫一扫

专栏目录