Question

我有一张美国的图像地图。单击状态时，地图会淡出，并显示该状态的地图，其中包含状态中区号的图像映射。在Firefox，Safari和Chrome中，状态映射变为可点击状态，并且美国地图变为不可点击，直到您关闭状态弹出窗口。但是在Internet Explorer中，美国地图仍可通过州弹出窗口点击，我无法点击任何区号。

这是我的javascript：

$(document).ready(function() {
        $("#usMap").html();
        $("#usMap").load("/includes/us_map.inc");
    });

    $('area').live('click', function() {
        var state = $(this).attr("class");

        var statePopover = $("<div id='statePopoverContainer'><a id='popoverCloseButton'>Close State</a><div id='statePopover'></div></div>");
        $("#usMap").append(statePopover);
        $("#usMapImage").fadeTo('slow', 0.2);

        $("#statePopover").load("/includes/stateMaps/" + state + ".html");
    });

    $("#popoverCloseButton").live('click', function() {
        $("#statePopoverContainer").remove();
        $("#usMapImage").fadeTo('slow', 1);
    });

我正在准备好文档上的地图，因为如果您没有Javascript，则会显示其他内容。

以下是所有相关内容的CSS：

div#usMap {
        width:676px;
        height:419px;
        text-align: center;
        position: relative;
        background-color:#333333;
        z-index: 1;
    }

    img#usMapImage {
        z-index: 1;
    }

    area {
        cursor: pointer;
    }

    div#statePopoverContainer {
        width:100%;
        height:100%;
        z-index:5;
        position:absolute;
        top:0;
        left:0;
    }

    a#popoverCloseButton {
        position:absolute;
        right:0;
        padding-right:5px;
        padding-top:5px;
        color:#FFFFFF;
        cursor:pointer;
    }

您可以在http://dev.crewinyourcode.com/

看到这种情况

使用测试版/测试人员登录

Answer 1

经过一个小时的调整和不调整，IE条件和解除我的jQuery事件...我所要做的就是改变$（“area”）。live（）到$（“map＃countryMap area”） .live（），它完美无缺。

Answer 2

尝试在半透明黑色背景的点击事件中返回false。在jQuery中可以这样做：

$("#black_bg").click(function(){
    return false;
});

此外，由于您使用的是绝对定位，因此请将地图设置为低于特定状态地图和黑色背景的z-index。

编辑：我看到您上传了相关代码。尝试在触发链接图上的点击事件时或在黑色背景上返回false，看看是否有任何效果。

Answer 3

原因是您拥有的图像映射是根据屏幕位置记录点击次数。请记住，使用地图，您告诉浏览器当您在XX和YY之间获得点击时，然后执行操作。

每当加载popover元素时，您可能希望删除“Click”事件处理程序（或只是将其更改为false）。

IE图像映射仍然可以在另一个div后面点击

3 个答案: