IE 11 Not Firing Mouseenter or Mouseleave Events On SVG Map

I have been struggling with this for 2 days now and have read (and tried) more ‘hacks’ than I can imagine and nothing I do seems to work.

I have an SVG map of the US, there are jQuery events for mouseenter and mouseleave that work fine in other browsers that IE 11 (and I assume 9 & 10) are ignoring.

When entering a state’s border the fill should change (try it in FF) and a tool tip should show up (and follow the mouse). Again they work fine in other browsers but IE just ignores them. I tried a mouseover event just to see if it worked and it did. IE also correctly works on the click function but these other two just bomb.

You can see the page at http://amgoa.org/State-Gun-Laws the JS is at http://amgoa.org/scripts/reciprocity.js

Here’s a snippet of the JS:

$('.state').mouseenter(function()   {

    if (!state_selected)    {
        $(this).css('fill', '#c8b33b');
        }

    if (strpos($(this).attr('id'), 'R_') === false) {

        $('#state_label').text($(this).attr('alt')).show();

        $(document).mousemove(function(e)   {

            $('#state_label').css({
                left: e.pageX - 55,
                top: e.pageY + 20
               });

            });

        }
    else if (state_selected)    {
        $('#state_label').text('').hide();
        }

    });

$('.state').mouseleave(function()   {
    if (!state_selected)    {
        $('#state_label').text('').css('display', 'none');
        $(this).css('fill', '#001a8b');
        }
    });

I should also add that there is a hack being used so that the map scales properly in IE using a parent container with padding and then ‘sliding’ the map up using absolute positioning

Any help would be truly appreciated as this is holding up a bigger project on this site using a similar map, this failure on this page isn’t the end of the world but on the other one it is mission critical that it works.

Hi DC,

There’s a bug in the jquery version you are using so changing to jquery 1.8.3 works for me in IE11. Whether or not it breaks the function of anything else you will need to check or use the migrate plugin etc.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Note that IE edge is ok with your current version anyway.

Thanks Paul. I was playing with it this morning and was able to get it working using mouseover and mouseout but what bothered me is that those events are continuously firing when the mouse is over them and moving.

Will try to upgrade to 1.8.3 but I know I have a ton of old code that is using deprecated functions and events … le sigh

OT

Why do you keep referring to MS Edge as IE Edge. The Edge browser is not a version of IE and should still be around decades after IE has been completely forgotten.

Microsoft have clearly stated that MS Edge is a completely new browser using a completely different rendering engine to IE and that IE11 is the only version of IE that is still supported.

Note also that MS Edge doesn’t have versions as all copies are automatically updated whenever there is a change so that everyone using Edge is always running the latest version.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.