JS Cross Browser Compatibility Issue

Question

Этот фрагмент кода отлично работает в 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 вы можете.

Answer 1

Ваша проблема не имеет ничего общего с вашим скриптом (вы можете полностью удалить его, и проблема не устранена) и все, что связано с вашим HTML.

usemap свойства должны быть ведущими #. По W3C spec on <map>:

Атрибут usemap, если указано, должно быть действительным имя хэш-ссылка к map элементу.

hash-name reference является

строка, состоящая из символа «#» (U + 0023), а затем строку, которая точно соответствует значению атрибута имени элемента

Ваше usemap значение не имеет ведущего #, которое принимает Chrome (вне требований спецификации) и Firefox нет. Добавление ведущего # в ваш атрибут usemap исправляет ваш код.