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

How to disable context menu (Save and Share Photo) at IE with Windows Phone

本文关键字：保存 菜单 共享 照片 上下文 Phone Windows 何使用 IE      更新时间：2023-09-26

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

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

最后，我已经尝试过像这篇文章禁用长按时的上下文菜单

真的，什么都没用;-（。

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

有人可以帮助我吗？

好吧，我用不透明度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>

相关文章：