如何禁用智能手机 <input> 的“图像另存为”弹出窗口

Question

在我制作的网页上，我使用input标签作为图像源。当智能手机上的按钮按下时间过长时，会弹出一个带有“另存为”等内容的窗口。

我搜索了阻止这种情况发生的选项，因为用户需要按住按钮，因为这是一种游戏。

我已经将这些命令放在输入的 CSS 标签中，但仍然出现弹出窗口：

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

我无法使用pointer-events:none;，因为它禁止单击计算机上的按钮

如果您知道如何解决此问题，请告诉我，我在使用标签时遇到了同样的问题

$('#ID').mousedown（ps，我通过使用、up和命令将按钮链接到 JavaScript 来让按钮工作leave）

这是我试图避免的弹出窗口的图像，以防您不知道我在说什么

根据要求，这是我使用输入标签的方式，当我以相同的方式使用它时，img标签也给出了同样的问题

html:
<input type="image" src="up.png"     class="UpKeyImage" id="Up">

javascript (with jquery):
$('#Up').mousedown(function() {$("#Dancer").attr("src","dancerup.png");});
$('#Up').mouseup(function() {$("#Dancer").attr("src","dancer.png");});
$('#Up').mouseleave(function() {$("#Dancer").attr("src","dancer.png");});

Answer 1

我无法测试它，但这值得一试。

我认为您的浏览器<input type="image" />正在践踏这一点。<img>

为了防止这种情况，您可以将输入类型更改为type="submit"或type="button"，这样就不会显示图像上下文菜单。为此，您必须更改 html 和 css。这并不比您的解决方案更正确，但它应该可以帮助您解决问题：

HTML：

<input type="button" class="UpKeyImage" id="Up" value="Up" />

新的CSS：

.UpKeyImage {
    /*this will hide the value*/
    text-indent: -999em;
    overflow: hidden;
    text-align: left;
    /*Downside of this solution, you will need to define the width and height*/
    width: 400px;
    height: 200px;
    /*this will be dancerup.png*/
    background-image: url(http://lorempixel.com/400/200/);
    border: none;
    background-color: transparent;
    box-shadow: none;
}
.UpKeyImage.dance-up {
    /* path to the other image */
    background-image: url(http://lorempixel.com/sports/400/200/);
}

还有一些新的 jQuery：

$(function () {
    $('#Up')
    .mouseup(function () {
        $(this).removeClass("dance-up");
    })
    .mouseleave(function () {
        $(this).removeClass("dance-up");
    })
    .mousedown(function () {
        $(this).addClass("dance-up");
    });
});

这是一个演示： http: //jsfiddle.net/nr9ffw84/