禁用三星 Galaxy 3 上的长按事件答案

【问题标题】：Disable long press event on Samsung Galaxy 3禁用三星 Galaxy 3 上的长按事件
【发布时间】：2014-06-12 07:31:12
【问题描述】：

我们的一个客户想要阻止从他们的网站保存图片。

我已经在所有浏览器上实现了这一点，除了三星 Galaxy 3 上的浏览器，它仍然显示上下文菜单以在长按时保存图像，尽管图像具有以下 CSS 属性：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

我还尝试使用 preventDefault() 拦截 touchstart 事件，但如果您尝试滚动时手指在其中一张图像上，则无法滚动页面。

【问题讨论】：

您是否告诉您的客户这很容易被规避？
您可能会在这里找到答案：stackoverflow.com/questions/3413683/…
如果你能看到图片，你可以复制它。如果您不希望用户保存图像，请不要将网站置于在线状态...
@MikeW - 谢谢，是的。他们只是想让“普通”用户尽可能地困难。
@BrendanMullins - 谢谢 Brendan，是的，我有，不幸的是，这有我提到的问题，您在触摸其中一张图像时无法滚动页面。

标签： javascript android css

【解决方案1】：

如果你在图像上放置一个透明的 div 甚至是一个伪元素，你就不能轻松地右键单击或长按图像。

HTML：

<div class="image-wrap">
    <img src="dontCoppyThisImage.jpg" />
</div>

css:

.image-wrap {
    position: relative;
}
.image-wrap:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

这是一个简单的例子：http://jsfiddle.net/JU4A7/

【讨论】：

Hey Brendan，刚刚用三星尝试了这个小提琴，不幸的是我仍然能够保存图像。

【解决方案2】：

我遇到了这个问题。无论你做什么（通过css或js停止触摸事件，使用遮罩层吸收事件等），银河只是在你长按图像时弹出菜单。

我能想到的唯一方法是使用画布而不是 img。这是代码

var $canvas = $('<canvas ></canvas>');
var img = new Image();

$body.append($canvas);

img.onload = function(){
    $canvas[0].width = img.width;
    $canvas[0].height = img.height;
    $canvas[0].getContext('2d').drawImage(img, 0, 0, img.width, img.height);
}
img.src = src;

我在这里创建了一个备忘录： http://browser.colla.me/show/Galaxy_Android_devices_enables_image_to_be_saved_whatever_you_do

【讨论】：