Javascript Clickables funktioniert nicht in Firefox

Question

aus irgendeinem Grund funktioniert mein Code unten in Chrome und IE, aber nicht in Firefox. Ich verwende dies, um anklickbare Abschnitte eines Bildes anzuzeigen, denke Image Map. Die vordefinierten Boxen werden in Firefox angezeigt, aber wenn ich darauf klicke, wird die Box nicht ausgewählt. In Chrome und IE wird die Box grün ausgefüllt, wenn sie ausgewählt wird. Irgendwelche Ideen?

var area = []; 
var highlight = []; 

function addClickable(shape, coords) { 
    area.push('<area class="area" href="#0" shape="' + shape + '" coords="' + coords.join(",") + '" style="outline: none;" title="" />'); 
    if (shape.toLowerCase() == "rect") { 
     highlight.push('<rect x="' + coords[0] + '" y="' + coords[1] + '" width="' + (coords[2] - coords[0]) + '" height="' + (coords[3] - coords[1]) + '" style="fill-opacity:0.7; fill: none;" class="highlight" />'); 
    } 
    if (shape.toLowerCase() == "poly") { 
     var newCoords = coords.join(" ").replace(/(\d+)\s(\d+)\s/g, '$1, $2 '); 
     highlight.push('<polygon points="' + newCoords + '" style="opacity: 0.7; fill: none;" class="highlight" />'); 
    } 
} 

function clickEvent(id, question, color){ 
    var i = id.split(".")[2]; 
    var idd = "[id='" + id + "']"; 
    var label = "#question_" + question; 
    var map = "#" + question + "_Map .area"; 
    var highlight = "#" + question + "_Highlight .highlight"; 

    if ($ (idd).is(':checked')) { 
     $ (map + ":eq(" + i + ")").css("cursor", "pointer"); 
     $ (highlight + ":eq(" + i + ")").css("fill", color); 
    }else{ 
     $ (map + ":eq(" + i + ")").css("cursor", "pointer"); 
     $ (highlight + ":eq(" + i + ")").css("fill", "none"); 
    } 
    $ (map + ":eq(" + i + ")").prop('title', $ (idd).parent().parent().children(".cell-text").children("label").text()); 
    $ (map + ":eq(" + i + ")").bind("mouseenter", { currentIndex: i }, function(event) { 
     $ (highlight + ":eq(" + event.data.currentIndex + ")").css("stroke", color); 
    }); 
    $ (map + ":eq(" + i + ")").bind("mouseleave", { currentIndex: i }, function(event) { 
     $ (highlight + ":eq(" + event.data.currentIndex + ")").css("stroke", "none"); 
    }); 
    $ (map + ":eq(" + i + ")").bind("click", { currentIndex: i }, function(event) { 
     visualEvent(label,idd,highlight,color,event.data.currentIndex); 
    }); 
    $ (idd).bind("click", { currentIndex: i }, function(event) { 
     visualEvent(label,idd,highlight,color,event.data.currentIndex); 
    }); 
    $ (idd).parent().children(".fir-icon").bind("click", { currentIndex: i }, function(event) { 
     visualEvent(label,idd,highlight,color,event.data.currentIndex); 
    }); 
} 

function visualEvent(label,idd,highlight,color,index){ 
    var target = $ (event.target); 
    if ($ (label).hasClass("checkbox")) { 
     if ($ (idd).is(':checked')) { 
      if (target.is("area")){ 
       $ (idd).attr('checked',false); 
       $ (idd).parent().children(".fir-icon").removeClass("selected"); 
       $ (highlight + ":eq(" + index + ")").css("fill", "none"); 
      }else{ 
       $ (highlight + ":eq(" + index + ")").css("fill", color); 
      } 
     } else {  
      if (target.is("area")){ 
       $ (idd).attr('checked','checked'); 
       $ (idd).parent().children(".fir-icon").addClass("selected"); 
       $ (highlight + ":eq(" + index + ")").css("fill", color); 
      }else{ 
       $ (highlight + ":eq(" + index + ")").css("fill", "none"); 
      } 
     } 
    } 
    if ($ (label).hasClass("radio")) { 
     if (target.is("area")){ 
      $ (idd).attr('checked','checked'); 
      $ (label + " .fir-icon").removeClass("selected"); 
      $ (idd).parent().children(".fir-icon").addClass("selected"); 
     } 
     $ (highlight).css("fill", "none"); 
     $ (highlight + ":eq(" + index + ")").css("fill", color); 
    } 
} 

function initClickable(QLabel, QColor, QTest) { 
    var areaMerge = "", highlightMerge = ""; 
    var imgClass = ".clickables"; 

    $ (imgClass).css("display", "block"); 
    $ (imgClass).attr("usemap", "#" + QLabel + "_Map"); 
    $ (imgClass).wrap('<div id="' + QLabel + '_MapBox" style="position: relative;"></div>'); 

    $.each(area, function() { areaMerge += this; }); 
    $.each(highlight, function() { highlightMerge += this; }); 
    $ ("#" + QLabel + "_MapBox").append('<map name="' + QLabel + '_Map" id="' + QLabel + '_Map">' + areaMerge + '</map>'); 
    $ ("#" + QLabel + "_MapBox").append('<svg id="' + QLabel + '_Highlight" style="width:' + $ (imgClass).width() + 'px; margin-top: -' + $ (imgClass).height() + 'px; height:' + $ (imgClass).height() + 'px; z-index: 1000; pointer-events: none; display: block;">' + highlightMerge + '</div>'); 

    $ ("#" + QLabel + "_Highlight .highlight").each(function(){ 
     $ (this).css("fill", "#fff"); 
    }); 

    $ ("#" + QLabel + "_Map .area").each(function(){ 
     $ (this).css("cursor", "default"); 
    }); 

    $ ("#question_" + QLabel + " input").each(function() { 
     id = $ (this).attr('id'); 
     clickEvent(id,QLabel,QColor); 
    }); 

    if (QTest.toLowerCase() == "live") { 
     $ ("#question_" + QLabel + " .clickableCell").hide(); 
    } 

    $ ("#question_" + QLabel + " .no-answer").bind("click", function(event) { 
     if ($ (this).is(':checked')) { 
      $ ("#" + QLabel + "_Highlight .highlight").css("fill", "none"); 
      $ ("#question_" + QLabel + " .clickables").attr("usemap",""); 
     }else{ 
      $ ("#question_" + QLabel + " .clickables").attr("usemap","#"+QLabel+"_Map"); 
      $ ("#" + QLabel + "_Highlight .highlight").each(function(){ 
       $ (this).css("fill", "#fff"); 
      }); 
      $ ("#question_" + QLabel + " input").each(function() { 
       $ ("#" + QLabel + "_Highlight .highlight:eq(" + $ (this).attr('id').split(".")[2] + ")").css("fill", "none"); 
      }); 
     } 
    }); 
    $ ("#question_" + QLabel + " .no-answer").parent().children(".fir-icon").bind("click", function(event) { 
     if ($ ("#question_" + QLabel + " .no-answer").is(':checked')) { 
      $ ("#" + QLabel + "_Highlight .highlight").css("fill", "none"); 
      $ ("#question_" + QLabel + " .clickables").attr("usemap",""); 
     }else{ 
      $ ("#question_" + QLabel + " .clickables").attr("usemap","#"+QLabel+"_Map"); 
      $ ("#" + QLabel + "_Highlight .highlight").each(function(){ 
       $ (this).css("fill", "#fff"); 
      }); 
      $ ("#question_" + QLabel + " input").each(function() { 
       $ ("#" + QLabel + "_Highlight .highlight:eq(" + $ (this).attr('id').split(".")[2] + ")").css("fill", "none"); 
      }); 
     } 
    }); 
} 

Answer 1

Wenn ich die Seite in Firefox und klicken Sie auf etwas zu sehen, sehe ich „Reference: Ereignis ist nicht definiert“ in der Konsole.

Sie beziehen sich auf event.target in der ersten Zeile von visualEvent, aber event ist nicht im Anwendungsbereich. Versuchen Sie, es als Parameter zu visualEvent hinzuzufügen.