JS跨浏览器兼容性问题

JS Cross Browser Compatibility Issue

本文关键字：问题 兼容性 浏览器 JS      更新时间：2023-09-26

这段代码在Chrome中运行良好，但在Firefox或IE中则不然。

<script>
$(document).ready(function(){
    var currentOne=$("#instructions");
    currentOne.addClass("visibleLabel");
    $('map area').mousemove(function(e) {
        $(currentOne).removeClass("visibleLabel");
        currentOne = '#' + $(this).data('label');
        $(currentOne).addClass("visibleLabel");
    });
});
</script>
<img src="http://greenparty.org.uk/assets/images/site_graphics/national/greenmap.png"
    usemap="greenuk" id="theGreenMap">
<map name="greenuk">
    <area shape="poly" id="region-southeast"
          data-label="southeast" coords="256,485,262,486,285,542,301,531,344,536,349,547,298,577,263,574,234,587,205,577,202,562,216,513,214,499,247,498"
          alt="southEast" href="south-east" />
    <!-- etc. -->
</map>

以下是JS Fiddle：http://jsfiddle.net/ve9hywdq/1/如果你在Firefox中尝试，你无法点击你想要的地图部分，但在Chrome中你可以。

您的问题与脚本无关（您可以完全删除它，问题仍然存在），而是与HTML有关。

usemap属性必须具有前导#。根据W3C关于<map>:的规范

如果指定了usemap属性，则该属性必须是对map元素的有效哈希名称引用。

哈希名称引用是

一个字符串，由一个"#"（U+0023）字符和一个与元素的名称属性值完全匹配的字符串组成

您的usemap值没有一个前导#，Chrome接受它（不符合规范的要求），Firefox没有。在usemap属性中添加前导#可以修复代码。

相关文章：