1

Necesito arreglar un error o un comportamiento no deseado que sólo ocurre en Google Chrome, en el resto de navegadores funciona correctamente. En Chrome no me funciona hacer clic en la imagen interior del botón, en cambio, funciona al clicar en el botón pero fuera de la imagen interior.

El código del botón HTML devuelto por un script en perl es:

   print "document.write('<tbody class=\"no_ordenar\"><tr id=\"f0\"><td><button class=\"binsertar\" eb=0><img style=\"margin: 0 18px 0 18px\" src=\"imagenes/table_add.png\" alt=\"\"></button></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class=\"tdnotas\">Notas</td><td></td></tr></tbody>');\n";

El código JavaScript donde se cambia la imagen del icono es:

function clicBotonPapelera($target) {
if ( $target.attr('eb') == 0 ) {
    $target.find('img').attr('src','imagenes/papelera_r.png');
    $target.attr('eb', 1);
} else {
    $target.find('img').attr('src','imagenes/papelera_g.png');
    $target.attr('eb', 0);
}
}

y el código que ejecuta perl una vez clicado es:

function eliminarProveedoresBD() {
$("#proveliminados").dialog( "open" );
$("#reseliminacion").html("");

$(".bborrar").each( function() {
    if ( $(this).attr('eb') == 1 ) {
        var valor = $(this).closest("tr").attr("id").replace(/^f/,"");
        llamada = document.createElement('script');
        llamada.src = '/perl/inventario/eliminar_prov.pl?' + valor;
        document.body.appendChild(llamada);
        llamada.parentNode.removeChild(llamada);
    }
} )
}

Por lo que parece puede ser un problema con el valor de eb que hay en el botón

¿Cómo lo puedo hacer para que funcione en Chrome de forma correcta?

3
  • prueba a ponerle a la imagen en css: img{pointer-events: none}
    – David
    el 22 may. 2018 a las 10:38
  • Funciona!! Muchisimas gracias David, eres un crack!!!
    – Multimedia
    el 22 may. 2018 a las 10:56
  • Me alegro de que te funcione, lo paso a respuesta
    – David
    el 22 may. 2018 a las 10:57

1 respuesta 1

1

El problema está en que al pulsar sobre la imagen no estás pulsando en el botón por que la imagen está por encima y se lleva el evento del click. Para solucionar esto puedes añadir a la imagen un simple css pointer-events: none para eliminar cualquier interacción del puntero del ratón con la imagen. Por tanto al pulsar en la imagen estarías pulsando en realidad en el objeto inmediatamente por debajo, que es el botón.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.