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

【问题标题】：How to disable context menu (Save and Share Photo) at IE with Windows Phone如何使用 Windows Phone 在 IE 上禁用上下文菜单（保存和共享照片）
【发布时间】：2015-03-14 15:50:12
【问题描述】：

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

我不保存的解决方案是禁用浏览器上下文菜单，它在所有浏览器上都像一个魅力，但在 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 上。

有人可以帮助我吗？

【问题讨论】：

标签： javascript html css internet-explorer windows-phone-8

【解决方案1】：

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

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

看看你要做什么。

<!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>

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

<!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>

【讨论】：