„Onclick“ Ereignis funktioniert nicht in FF und Chrome

Question

Ich habe einige SVG-Pfade in einem div mit einem onclick Attribute:

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

Die open() Funktion wird in einer separaten JS-Datei definiert, die kurz vor dem implementiert body-Tag (wie die jQuery als auch Datei):

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

div#info1 zum Beispiel ist ein Informationsfeld innerhalb div#information, ein Vollbild halbtransparenten schwarzen Hintergrund (gibt es Leuchtkasten artigen effec t).

Alles funktioniert gut mit Safari. Wenn ich es jedoch mit FF oder Chrome versuche, scheint der Browser beim Klicken eine neue Seite zu laden (was nicht passieren sollte), und es entsteht ein leerer Bildschirm ohne Quellcode.

Seite ist hier zu sehen: frank.schufi.ch/3dmapping

Answer 1

es einige Mismatch Verhaltensweisen zwischen Browser sind so könnte dies das sein, warum es und für das, was passiert, es scheint mir, andere open(n) Funktion aufgerufen wird. versuchen, die Funktionsnamen ändern, lassen sagen:

newOpen(n) 

sehen, ob es hilft.

Answer 2

Wie Haocheng kommentierte, ist ein aktuellerer Weg ein Ereignishandler für das Klicken auf den Pfad zu machen. Sie erreichen würden im Grunde das gleiche Ziel diesen jQuery-Schnipsel, die statt:

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

Ich bin nicht sicher, ob dies einen Unterschied in den Ergebnissen machen, wie jemand darauf hingewiesen, könnte mit der Tatsache zu tun, dass Sie Namen Ihre Funktion open(), so könnte es sein. Was würde ich vorschlagen, versuchen Sie, wenn Sie immer noch Probleme haben, ist das Hinzufügen einer preventDefault(), wie folgt aus:

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

Dieses Standardverhalten von HTML entfernt. Wenn beispielsweise .limbs an eine <a> Elemente angehängt wäre, würde dies das Standardverhalten der folgenden Verknüpfung verhindern. Dann könnte auch das Umbenennen der Funktion in newOpen() ausreichen. :)

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

onclick scheint kein gültiges Attribut von <path /> zu sein. Daher fügt der Browser dem Ereignis wahrscheinlich keinen Listener hinzu. Versuchen Sie, das Element <path /> in ein Element einzufügen, das ein onclick-Ereignis auslöst, und setzen Sie dann Ihr onclick auf dieses Element, oder verwenden Sie jQuery, um einen Listener auf dieses dom-Element zu erzwingen und ein Ereignis beim Klicken auszulösen. Sie können wahrscheinlich addEventListener mit Vanille js und das gleiche auch ohne jQuery erreichen.