CODEWITHSUNDEEP
javascriptcross-browser
Julie
Julie

Reputation: 101

mouseenter and mouseleave on safari, edge and IE

I wrote a js code to trigger mouseenter and mouseleave on map areas. It works fine in Chrome and Firefox, but not in Safari, Edge, nor IE.

I really can't understand why.

Here is my javascript : 

var areas = document.getElementsByTagName('area');

// set event listener for all objects
for (var i = 0; i < areas.length; i++) {
    areas[i].addEventListener('mouseenter', inArea);
    areas[i].addEventListener('mouseleave', outArea);
}

// On mouse enter
function inArea() {
    console.log('mouseenter');
}

// On mouse leave
function outArea() {
    console.log('mouseleave');
}

You can play with it here : https://codepen.io/fantomette/pen/pVdLwM

What is wrong with this code ? Or maybe you know an other way to do it ?

Thank you.

Upvotes: 3

Views: 4486

Answers (1)

Julie
Julie

Reputation: 101

I replaced "mouseenter" and "mouseleave" by "mouseover" and "mouseout" and it works fine in every browsers.

Upvotes: 7

Related Questions