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

Question

在我制作的网页上，我使用input标记作为源图像。 当在智能手机上按下按钮太长时，会出现一个弹出窗口，其中包含＆＃34;另存为＆＃34;等

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

我已将这些命令放在输入的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，让按钮工作

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

根据要求，这是我使用输入标签的方式，当我以相同的方式使用时，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/

Answer 2

另一个容易解决的问题是： 将a或a作为父项来接收鼠标单击事件， 然后将CSS设置为：指针事件：无；

Answer 3

为什么不使用＆＃39;指针事件：无＆＃39;在媒体容器内，所以它只适用于智能手机？

@media (max-width: 767px) {
    input {
        pointer-events: none;
    }
}