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

Question

我有一张美国的图像 map 。当您单击某个州时， map 会淡出并出现该州的 map 以及该州区号的图像 map 。在 Firefox、Safari 和 Chrome 中，州 map 变为可点击状态，而美国 map 变为不可点击状态，直到您关闭状态弹出框。但是在 Internet Explorer 中，美国 map 仍然可以通过州弹出框点击，我无法点击任何区号。

这是我的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);
    });

我正在加载 map 文档准备就绪，因为如果您没有 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/ 看到这种情况发生

使用 beta/tester 登录

Answer 1

经过一个小时的调整和取消调整、IE 条件和取消绑定(bind)我的 jQuery 事件...我所要做的就是将 $("area").live() 更改为 $("map#countryMap area") .live() 并且运行良好。