由于某些原因，我的代码在Chrome和IE浏览器中无法使用，但在Firefox中无法使用，因此JavaScript可点击不能在Firefox

Question

中使用。我使用它来显示图像的可点击部分，请考虑图像映射。预定义的框在Firefox中显示，但是当我点击它们时，框不会选择。在Chrome和IE中，选中该框时会填充绿色。有任何想法吗？

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

当我在Firefox中查看页面并单击某些内容时，控制台中会显示“ReferenceError：event is not defined”。

您在visualEvent的第一行中参考event.target，但event不在范围内。尝试将其作为参数添加到visualEvent。