Maphilight 与 IE9 中的 Jquery 选项卡发生冲突

Posted 2023-05-09

【中文标题】Maphilight 与 IE9 中的 Jquery 选项卡发生冲突

【英文标题】：Maphilight *** with Jquery tabs in IE9

【发布时间】：2015-01-23 11:40:40

【问题描述】：

有人吗？有什么线索吗？？

我正在尝试在同一页面上创建两个具有高亮功能的地图。这适用于所有现代浏览器（IE11、Chrome 等），但不适用于 IE9。您可以使用以下小提琴来证明这一点：http://jsfiddle.net/Guill84/Sws2T/13/

为了便于参考，我在下面粘贴了启动插件的脚本。有什么原因可以在所有浏览器中正确加载但在 IE9 中没有？还是我的代码有问题？使用的插件是'Maphilight' (https://github.com/kemayo/maphilight)

提前致谢， G

$(function () 
    $('.map').maphilight(
        stroke: false,
        fillColor: 'D2D2D2',
        fillOpacity: 1
);
    $('.map2').maphilight(
        stroke: false,
        fillColor: 'D2D2D2',
        fillOpacity: 1
);

    //light up first element
    //this code is repeating below but not sure how to make more condensed
    var data = $(this).data('maphilight') || ;
    data.alwaysOn = true;
    $('.map, .map2').data('maphilight', data).trigger('alwaysOn.maphilight');
    // initialize tabbing
    $(".tabs area:eq(0)").each(function () 
        $(this).addClass("current");
    );
    $(".tab-content").each(function () 
        $(this).children(":not(:first)").hide();
    );
    $(".tabs area").each(function (o, i) 
        var d = $(this).data('maphilight') || ;
        d.fillOpacity = 1;
        d.alwaysOn = true;
        $(this).attr("rel", d.fillColor);
        $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    );
    $(".tabs area").hover(function () 
        var d = $(this).data('maphilight') || ;
        //d.fillOpacity=0.6;
        d.fillColor = "A0A0A0";
        $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    , function () 
        var d = $(this).data('maphilight') || ;
        //d.fillOpacity=0.6;
        if (typeof d.clicked === "undefined" || d.clicked == false) 
            d.fillColor = $(this).attr("rel");
         else 
            d.fillColor = "379ee0";

        
        $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    );
    //map clicks
    $(".tabs area").click(function () 
        //areas loop:
        $(".tabs area").not(this).each(function (o, i) 
            var d = $(this).data('maphilight') || ;
            d.clicked = false;
            d.fillColor = $(this).attr("rel");
            if (d.alwaysOn === false) 
                //d.alwaysOn = false;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
            
        );

        var data = $(this).data('maphilight') || ;
        data.alwaysOn = true;
        data.fillColor = "379ee0";
        data.clicked = true;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');

        if ($(this).hasClass("current") === false) 
            var thisTarget = $(this).attr("href");
            $(this).parents(".tabs").find('area.current').removeClass('current');
            $(this).addClass('current');
            $(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function () 
                $(thisTarget).fadeIn("normal");
            );

        
        return false;
    );
);

【参考方案1】：

我看到的问题不是插件jQuery Maphilight，而是另一个插件 - jQuery Panzoom，似乎不支持低于 v.9 的 Internet Explorer 版本：

Panzoom 使用 CSS 转换和矩阵函数来利用浏览器中的硬件/GPU 加速，这意味着元素可以是任何东西：图像、视频、iframe、画布、文本，等等。虽然不支持 IE

详情请看这里-https://github.com/timmywil/jquery.panzoom/blob/master/README.md

但是，您说您使用 IE 9 进行测试，您究竟是如何执行测试的，这是真正的 IE 9 还是您在模拟版模式下运行 IE 11？ 我可以确认，jsfiddle 代码在模拟模式下的 IE 9 下工作得很好，除了用鼠标滚轮缩放之外，它只适用于按钮 Zoom In / Zoom Out。

【讨论】：

您好 bodi0，非常感谢您对此进行调查。 panzoom 功能似乎工作正常 - 当我完全删除它时，我仍然遇到 maphilight 没有加载两次的问题。事实上，如果有冲突，我认为是与 Jquery 选项卡。如果您删除代码$("#tabs").tabs(); 中的这一行，您会注意到插件正确加载...？我使用的是正版 IE9（我的客户的...）。

我的建议是尝试旧/新版本的 jQuery UI，例如好的旧 1.8.x 或 2.x

你好 bodi0，我试过了，没有成功。我不明白发生了什么事。你有什么其他的建议或建议吗？

确实存在影响 IE 9 的库冲突，如果您必须支持旧版浏览器，我的建议是删除 jQuery UI。还有其他插件，它们实现了选项卡并且是基于 jQuery 的。

我不确定我是否关注 bodi0。我无法删除 jQuery UI，因为我需要构建选项卡并且 maphilight 插件也需要它。对此是否有“noconflict()”解决方案，如果是，它将如何工作？