Question

我有一个显示一些照片的页面。我的用户无法保存照片。

我的不保存解决方案是禁用浏览器上下文菜单，在所有浏览器中都像魅力一样，但在Window Phone上不能使用IE浏览器。当我触摸并按住图像时，本机Windows Phone上下文菜单似乎保存或共享。

我尝试过使用CSS

.img-disable-save{
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    touch-action: none !important;
}

我尝试使用Javascript，例如MSDN DOC

// Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);

最后，我试过这篇文章Disabling the context menu on long taps

真的，没有任何作用; - （。

我现在不知道该怎么做，我的选择已经完成了。这只发生在Windows Phone上。

有人可以帮助我吗？

Answer 1

好吧，我用不透明度DIV做了一个解决方法。这适用于所有人，包括用于Windows Phone的IE。

通过这种方法，我们确信不会出现保存图像的上下文菜单。对于所有浏览器，它是一个简单的DIV，而不是IMG。

看看你有什么需要做的。

＆＃13;

<!DOCTYPE html>
<html>

<head>

	<style>
		.image-panel{
			position: relative;
		}
		
		.image-panel .lock-save{
			position: absolute; 
			top: 0px; 
			left: 0px; 
			right: 0px; 
			bottom: 0px; 
			opacity: 0.0;
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: alpha(opacity=0);
		}
	</style>

	<script>
		function init(){
			blockContextMenu();
		}
		
		//It's not necessary, but don't show others options from context menu 
		function blockContextMenu(){
			document.addEventListener("contextmenu", function(e) { 
				e.preventDefault();
				return false;
			}, false);
		}
	</script>

</head>

<body onload="init()">

<div class="image-panel">
	<!-- This DIV below makes the lock save image -->
	<div class="lock-save"></div>
	<img id="imgLarge" style="width: 100%;" src="http://i.imgur.com/0hmvq40.jpg" />
</div>


</body>
</html>

＆＃13;

第二种解决方案是将图像作为背景。注意：也许您必须知道要在DIV设置的图像大小。

＆＃13;

<!DOCTYPE html>
<html>

<head>

	<style>
		.image-panel{
			height: 769px;
			background-image: url('http://i.imgur.com/0hmvq40.jpg');
		}
	</style>

	<script>
		function init(){
			blockContextMenu();
		}
		
		//It's not necessary, but don't show others options from context menu 
		function blockContextMenu(){
			document.addEventListener("contextmenu", function(e) { 
				e.preventDefault();
				return false;
			}, false);
		}
	</script>

</head>

<body onload="init()">

<div class="image-panel"></div>

</body>
</html>

＆＃13;

如何在Windows Phone上禁用上下文菜单（保存和共享照片）

1 个答案: