Safari、Edge 和 IE 上的 mouseenter 和 mouseleave

Question

我写了一个js代码来触发地图区域上的mouseenter和mouseleave。它在 Chrome 和 Firefox 中运行良好，但在 Safari、Edge 和 IE 中则不行。

我实在不明白为什么。

这是我的 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');
}

你可以在这里玩它：https ://codepen.io/fantomette/pen/pVdLwM

这段代码有什么问题？或者也许您知道另一种方法？

谢谢。

Answer 1

我用“mouseover”和“mouseout”替换了“mouseenter”和“mouseleave”，它在每个浏览器中都工作正常。