Javascript 可点击对象在 Firefox 中不工作

Question

出于某种原因，我的以下代码在 Chrome 和 IE 中有效，但在 Firefox 中无效。我用它来显示图像的可点击部分，想想图像映射。预先确定的框显示在 Firefox 中，但是当我点击它们时，框没有 select。在 Chrome 和 IE 中，当 selected 时，框将填充为绿色。有什么想法吗？

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, ',   ');
        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.

Javascript 可点击对象在 Firefox 中不工作

Javascript clickables not working in Firefox

html

javascript

firefox

clickable