jQuery_点击按钮锁定屏幕

最新推荐文章于 2021-06-18 15:48:27 发布

最新推荐文章于 2021-06-18 15:48:27 发布 · 703 阅读

文章标签：

#jQuery #CSS #IE #JavaScript #HTML #ViewUI

javascript&jQuery常用小技巧专栏收录该内容

3 篇文章

订阅专栏

为解决用户在自助设备上因未收到即时反馈而多次点击按钮的问题，本文介绍了一种通过创建透明div层来锁定屏幕的方法，以防止用户在处理过程中进行连续提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司最近做设备软件，发现用户使用自助设备（类似提款机）时点击按钮之后，发现没反应（其实正在与后台交互），就继续按，结果提交了很多次，老项目了，的确不够人性化，我给加了一个提示，点击后创建一层div锁定屏幕，防止用户连续提交。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>点击锁定屏幕，只对IE有效</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=gbk">

		<link rel="stylesheet" type="text/css" href="./styles.css">
		<script type="text/javascript" src="jquery-1.4.2.js"></script>
		<script>
			function stopEvent(){
				event.returnValue=false;
			};
			
			//创建一层div，覆盖原有屏幕，锁定其他按键等
			function lockScreen(){

				//使用screen.width和height，容易产生超出窗口大小的滚动条，最好使用window的width
				//var w = screen.width;
				//var h = screen.height;

				var w = $(window).width();
				var h = $(window).height();
				var x = $(window).scrollLeft();
				var y = $(window).scrollTop();

				//创建一层div遮盖，大小是窗口大小
				$("<div>").css({
					position:"absolute",
					width:w,
					height:h,
					left:x,
					top:y,
					filter:"alpha(opacity=60)",
					"background-color":"#f0f8ff"
				}).html("正在处理，请稍等").appendTo("body").slideDown(200);
				
				//锁定所有按键
				document.onkeydown = function(){
					if(event.keyCode == 13){
						$("#d").slideUp(500);
					}
					if(event.keyCode == 17 || event.keyCode == 16){
						//ctrl,shift键有时无法使用event.keyCode=0;
					}else{
						event.keyCode=0;
					}
					event.returnValue=false; 
				};

				document.oncontextmenu = stopEvent;//屏蔽鼠标左右键、
				document.onselectstart = stopEvent;//无法选择文字
				document.ondragstart = stopEvent;//禁止鼠标在网页上拖动
				document.onsource = stopEvent;
				//屏蔽滚动条暂无
			}

		$(function(){
			$("#but").click(function(){
				lockScreen();
			});
		});
		</script>
	</head>

	<body>

	<input id="but" type="button" style="position:absolute;left:800px;top:expression(parseInt(document.body.scrollTop)+500);" value="我是按钮" />
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
		<h1>一失足成千古风流人物</h1>
	</body>
</html>