解决 ios手机访问H5页面而 $(document).on绑定无效问题

最新推荐文章于 2024-02-21 13:23:39 发布

小谷粒

最新推荐文章于 2024-02-21 13:23:39 发布

阅读量1.2k

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/lovearforever/article/details/75375558

版权

前端技术专栏收录该内容

31 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
	<title></title>
	<style type="text/css">
		.grid{
			background-image:-webkit-linear-gradient(top,
							transparent 49px,
							#bfbebe 50px),
							-webkit-linear-gradient(left,
							transparent 49px,
							#bfbebe 50px);

			background-size:50px 50px;
			background-repeat:repeat;                     /*先画个网格，便于布局*/
		}

		/*主容器*/
		.main-container{
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:1000px;
		}

		/*BOX*/
		.box{
			width:100px;
			height:50px;
			background-color:grey;
			margin:100px;
			position:relative;
			color:white;
			text-align:center;
			line-height:50px;

                        /* 解决IOS不触发事件问题 **/
			cursor: pointer;
		}

		.box-style{
		/*	margin-top:10px;
			transition-property:margin-top;
			transition-duration:2s;
			transition-timing-function: ease-out;
			transition-delay:0;*/
			width:200px;
			height:100px;
			transition:width 1s ease-in-out,height 4s 1s ease-out;
		}
		/**/
			position:relative;
			width:100px;
			height:50px;
			border:1px solid black;
			/*-webkit-animation:demo 10s;*/
			-webkit-animation-name:demo;
			-webkit-animation-duration:2s;
			-webkit-animation-timing-function:ease-in;
			-webkit-animation-delay:0s;
			-webkit-animation-iteration-count:1;
			-webkit-animation-direction:alternate;
			-webkit-animation-fill-mode:backwards;
		}

		@-webkit-keyframes demo{
			0% {left:0;background-color:white;}
			50% {left:200px;background-color:yellow;}
			100% {left:0px;background-color:red;}
		}
		div{
			box-sizing:border-box;
		}
		.dialogue-mask{
			position:absolute;                        /*弹出层*/
			left:0;
			top:0;
			width:100%;
			height:100%;
			background-color:rgba(128,128,128,0.5);
			display:none;
			overflow:auto;
		}
		.dialogue-container{
			position:absolute;
			width:80%;
			left:50%;
			top:40%;
			box-sizing:border-box;
			-webkit-transform:translate(-50%,-50%);
			background-color:white;
			box-shadow: 1px 1px 1px 1px #cdcfda;
		    border-radius: 10px;
		    padding:15px;
		    display:block;
		    z-index:2;
		}

		.dialogue-title{
			font-size:16px;
			font-weight:bold;
			line-height:30px;
			position:relative;
		}

		.border-bottom::after{
			content:"";
			width:100%;
			height:1px;
			position:absolute;
			bottom:0;
			left:0;
			background-color:#b9b9b9;
			-webkit-transform:scaleY(0.5);

		}

		.dialogue-content{
			font-size:14px;
			line-height:25px;
			position:relative;
		}

		.dialogue-btn{
			margin-top:10px;
			text-align: center;
		}

		.clear-float::after{
			content:"";
			display:block;
			clear:both;
		}

		.dialogue-cancel{
			float:right;
			margin-right:20px;
			padding: 8px 25px;
			color:grey;
			background-color:white;
			border-radius:3px;
			border:1px solid #e2e1e1;
		}

		.dialogue-sure{
			float:right;
			padding: 8px 25px;
			color:white;
			background-color:#229ffd;
			border-radius:3px;
		}


		@-webkit-keyframes dialogue-in{
			0% {top:0;}
			50% {top:40%;}
			90% {top:37%;}
			100% {top:40%;}
		}

		.animation-dialogue-in{
			display:block;

			-webkit-animation:dialogue-in 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}


		/*隐藏滚动条*/
		.forbid-scroll{
			height:100%;
			overflow:hidden;
		}
	</style>
	<script type="text/javascript" src = "/common/js/station/c.jquery1.8.3.min.js" ></script>
	<script type="text/javascript">
		$(document).on("click",".box",function(){
			$(".dialogue-mask").show();
			$(".dialogue-container").addClass("animation-dialogue-in");
			$("body,html").addClass("forbid-scroll");//弹出层后，禁用body和html滚动
		});
		$(document).on("click",".dialogue-cancel",function(){
			$(".dialogue-mask").hide();
			$(".dialogue-container").removeClass("animation-dialogue-in");
			$("body,html").removeClass("forbid-scroll");
		});
		$(document).on("click",".dialogue-sure",function(){
			console.log("You have clicked the sure button")
		});
	</script>
</head>
<body>
	<div class="main-container grid">
		<div class="box">
			弹出对话框
		</div>
	</div>
	<div class="dialogue-mask">
		<div class="dialogue-container">
			<div class="dialogue-title border-bottom">
				对话框标题
			</div>
			<div class="dialogue-content border-bottom">
				这里是对话框内容，比如:你确定要提交调查信息吗？
			</div>
			<div class="dialogue-btn clear-float">
				<div class="dialogue-sure">
					确认
				</div>
				<div class="dialogue-cancel">
					取消
				</div>
			</div>
		</div>
	</div>
</body>
</html>

以上为一个POP弹窗带码，目标是在手机上访问。

经测试 IOS 没有触发$(document).on("clike",".box",function());事件，而android系统上就没有问题，在网上查到一个很巧妙的方式，就是给需要绑定事件的元素添加一个css cursor: pointer