javascript - 如何为 <input> 的智能手机禁用 'save image as' 弹出窗口

Question

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

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

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

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

我不能使用 pointer-events:none;因为它禁止点击计算机上的按钮

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

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

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

按照要求，这是我使用input标签的方式，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/