我有一个显示一些照片的页面。我的用户无法保存照片。
我不保存的解决方案是禁用浏览器上下文菜单,在所有浏览器上都非常有效,但在 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/