触屏手机端阻止长按弹出选择文字以及弹出菜单

1.主要代码

（1）css

/*触屏手机端阻止长按弹出选择文字以及弹出菜单*/
*{
	/*阻止文本选中*/
   -webkit-user-select: none;
   user-select: none;
   /*阻止菜单弹出*/
   -webkit-touch-callout: none;
   /*touch-callout去掉，安卓不支持须通过js里的阻止默认事件实现*/
   /*touch-callout: none;*/
}

（2）js

//H5中也提出了contextmenu，也可通过这个阻止默认事件
$('.back').bind('contextmenu', function(e) {
    e.preventDefault();
});

2.举例（html代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/*触屏手机端阻止长按弹出选择文字以及弹出菜单*/
			*{
				/*阻止文本选中*/
			   -webkit-user-select: none;
			   user-select: none;
			   /*阻止菜单弹出*/
			   -webkit-touch-callout: none;
			   /*touch-callout去掉，安卓不支持须通过js里的阻止默认事件实现*/
			   /*touch-callout: none;*/
			}
			
			/*下边为基础样式*/
			#bg{ position: absolute; left: 0; top:0,; max-width: 375px; }  .clearfix:before, .clearfix:after { content: '.'; display: block; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }  .btn_all{ width: 300px; height: 50px; line-height: 50px; background-color: rgba(0,0,0,0.5); position: absolute; left: 50%; margin-left: -150px; text-align: center; top: 100px; } .btn_style{ width: 100px; height: 50px; background-color: orange;  } .fl{ float: left; } .fr{ float: right; }
		</style>
	</head>
	<body>
		<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg"  id="bg"/>
		
		<div class="clearfix btn_all">
			<div class="btn_style fl">长按保存</div>
			<div class="btn_style fr back">返回上一页</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('.back').on('touchstart',function(e){
				/* 这里写touchstart的事件逻辑 */	
				alert(1);				 
				/**阻止默认事件（写在最后边即可）***/
				e.preventDefault();
				return false;
			});
			
			//H5中也提出了contextmenu，也可通过这个阻止默认事件
			//$('.back').bind('contextmenu', function(e) {
			    //e.preventDefault();
			//});

		</script>
	</body>
</html>

3.几点说明：

（1）在某些安卓机上，如果css中写了touch-callout也没用，安卓机不支持该属性;
（2）安卓机需要通过js的阻止默认事件来实现;
（3）无论通过touchstart还是contextmenu，其实最要最本质的还是阻止默认事件
（4）也就是在微信中用一下，在浏览器中支持性，不是那么好，有些支持，有些不支持，它是非标准属性

触屏手机端阻止长按弹出选择文字以及弹出菜单

猜你喜欢