javascript - mouseenter and mouseleave on safari, edge and IE - Stack Overflow

admin管理员组

文章数量:1391987

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 :

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

Thank you.

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.

• javascript
• cross-browser

Share Improve this question Follow asked May 7, 2018 at 16:06 JulieJulie 10111 silver badge55 bronze badges 2

• Doesn't work in what way? It produces errors in the developer console? No functionality and no errors? Does it only fail on that codepen site, or have you tried it in an actual application where it fails as well? – user2437417 Commented May 7, 2018 at 16:12
• Thank you for your answer. I don't see the console.log in the console on Safari, Edge and IE. There is no error in console. It fails on codepen and on my website. – Julie Commented May 8, 2018 at 7:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptmouseenter and mouseleave on safariedge and IEStack Overflow