javascript - ocultar - El evento "onclick" no funciona en FF y Chrome

ocultar campos processmaker

Question

Tengo algunas rutas SVG dentro de un div con un atributo onclick :

<path class="limbs" id="limb1" d="some coordinates here" onclick="open(1)" />

La función open() se define en un archivo JS separado, que se implementa justo antes de la etiqueta body (como el archivo jQuery):

function open(n) {
    $("#information").fadeIn();
    $("#info" + n).fadeIn();
}

div#info1 , por ejemplo, es un cuadro de información dentro de la información div#information , un fondo negro semitransparente a pantalla completa (le da un efecto de caja de luz).

Todo funciona bien con Safari. Sin embargo, si lo intento con FF o Chrome, el navegador parece cargar una nueva página cuando hago clic (lo que no debería suceder) y da como resultado una pantalla en blanco sin código fuente.

La página se puede ver aquí: frank.schufi.ch/3dmapping

Answer 1

hay algunos comportamientos de incompatibilidad entre los navegadores, por lo que este podría ser el motivo por el que ocurre y, por el qué, me parece que se está llamando a otra función de open(n) . intente cambiar el nombre de la función, por decir:

newOpen(n)

ver si ayuda.

Answer 2

onclick no parece ser un atributo válido de <path /> . Por lo tanto, es probable que el navegador no agregue un oyente a ese evento. Intente envolver el elemento <path /> en un elemento que activará un evento onclick luego ponga onclick en ese elemento, o como algunas de las otras respuestas aquí están aconsejando, use jQuery para forzar a un oyente en ese elemento dom y desencadenar un evento al hacer clic. Es probable que addEventListener con vanilla js y logre lo mismo sin jQuery también.

Answer 3

<path class="limbs" id="limb1" d="some coordinates here" data-open="1"  />

$(''#limb1'').click( function (e){
e.preventDefault();
var n = $(this).data(''open'');
$("#information").fadeIn();
$("#info" + n).fadeIn();
}

Answer 4

Como Haocheng comentó, una manera más actualizada de hacer esto es crear un controlador de eventos para hacer clic en la ruta. Básicamente, llegarías al mismo objetivo con este fragmento de jQuery:

$(''.limbs'').click(function() {
    $("#information").fadeIn();
    $("#info" + $(this).attr(''id'')).fadeIn();
});

No estoy seguro de si esto marcará una diferencia en el resultado, ya que alguien señaló que podría tener que ver con el hecho de que llamó a su función open() , por lo que podría ser. Lo que le sugiero que intente si todavía tiene problemas, es agregar preventDefault() , como este:

$(''.limbs'').click(function(event) {
    event.preventDefault();
    $("#information").fadeIn();
    $("#info" + $(this).attr(''id'')).fadeIn();
});

Esto elimina el comportamiento predeterminado de HTML. Por ejemplo, si .limbs estaría atado a un elemento <a> , evitaría el comportamiento estándar de seguir ese enlace. Por otra parte, cambiar el nombre de la función a newOpen () también puede ser suficiente. :)