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

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

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

我不保存的解决方案是禁用浏览器上下文菜单,在所有浏览器上都非常有效,但在 Window Phone 上对 IE 浏览器不起作用。当我触摸并按住图像时, native 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 上。

有人可以帮助我吗?

最佳答案

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

关于javascript - 如何使用 Windows Phone 在 IE 中禁用上下文菜单(保存和共享照片),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29050873/

相关文章:

javascript - Nvd3 - 尽管添加了所有外部资源,散点图仍不会加载

javascript - 为什么 HTML 不允许我以与 JSX 相同的方式添加事件处理程序?

html - 如何仅使用 css 使左侧菜单的内容居中?

html/css 框架,我绝对不能错过什么?

javascript - 循环音频指定的次数 Html5 或 Javascript

html - 调整屏幕大小时问题居中 Logo

javascript - 随着时间的推移添加动态 HTML 字段

javascript - 在 HTML 中嵌入 XML

javascript - 检测鼠标光标类型

css - html5验证图标签结构