En una página web que hice, uso la etiqueta input con como fuente una imagen. Cuando el botón se presiona demasiado en los teléfonos inteligentes, aparece una ventana emergente con "guardar como", etc.

Busqué opciones para evitar que esto suceda, ya que el usuario debe mantener presionados los botones porque es una especie de juego.

Ya puse estos comandos en la etiqueta CSS en la entrada, pero todavía aparecen ventanas emergentes:

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

No puedo usar pointer-events:none; ya que deshabilita hacer clic en el botón en la computadora

Avíseme si sabe cómo solucionar esto, tuve el mismo problema cuando usé una etiqueta

(ps, dejo que el botón funcione al vincularlo a JavaScript con los comandos $('#ID').mousedown, up y leave)

Aquí hay una imagen de la ventana emergente que estoy tratando de evitar en caso de que no sepas de lo que estoy hablando

example

Según lo solicitado, esta es la forma en que uso la etiqueta de entrada, la etiqueta img también dio el mismo problema cuando la usé de la misma manera

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");});
4
Cpt. Pineapple 4 sep. 2014 a las 18:52

3 respuestas

La mejor respuesta

No puedo probarlo, pero valdría la pena intentarlo.

Supongo que {{X 0}} está siendo tratado como un <img> por su navegador.

Para evitar esto, puede cambiar su tipo de entrada a type="submit" o type="button" que no debe mostrar el menú contextual de la imagen. Para que esto funcione, deberá modificar su html y su css. Esto no es realmente más correcto que su solución, pero debería ayudarlo con su problema:

Html:

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

Nueva 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/);
}

Y algunos nuevos jQuery:

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

Aquí hay una demostración: http://jsfiddle.net/nr9ffw84/

1
Nico O 4 sep. 2014 a las 16:58

¿por qué no utiliza 'eventos de puntero: ninguno' dentro de un contenedor de medios para que solo se aplique a los teléfonos inteligentes?

@media (max-width: 767px) {
    input {
        pointer-events: none;
    }
}
-2
chaseha 4 sep. 2014 a las 15:02

Otra solución fácil es que: Agregue a o a como padre para recibir los eventos de clic del mouse, luego configure css como: pointer-events: none;

0
RainCast 20 ago. 2019 a las 00:46