javascript - Mouseout 和 Mouseover 事件在 Chrome 39 中无法正常触发

Question

使用 Chrome 39(适用于 Mac)，以下内容不起作用

<div id='canvasWrapper'>
    <canvas id='main0'></canvas>
    <canvas id='main1'></canvas>
    <canvas id='main2'></canvas>
    <div id='mainToolbar'>
        <img src='magnify.png'>
        <img src='pencil.png'>
        <img src='plus.png'>
        <img src='ex.png'>
    </div>
</div>
<script>
    var wrap = document.getElementById('canvasWrapper');
    wrap.addEventListener('mouseover', function(){
        document.getElementById('mainToolbar').style.display = 'block';
    })
    wrap.addEventListener('mouseout', function(){
        document.getElementById('mainToolbar').style.display = 'none';
    })
    var imgs = [].slice.call(document.querySelectorAll('img'));
    imgs.forEach(function(img) {
        img.addEventListener('mouseover', function() {
            var string = img.className;
            string += ' inverted';
            img.className = string;
        })
        img.addEventListener('mouseout', function() {
            var string = img.className.split(' ').filter(function(classy) {
                return classy != 'inverted';
            }).join(' ');
            img.className = string;
        })
    })
</script>

当用户将鼠标悬停在包含 Canvas 的 div 上时，带有图标的工具栏应显示，在鼠标移开时隐藏。对于图像，将鼠标悬停在图像上会添加一个类，其中包含用于反转颜色的 css filter 属性。所有这些在 Safari 7.1 甚至 FF 28 中都完全符合预期。但是，在 chrome 中，只有在 canvasWrapper div 上或外部单击时才会触发事件。与 addEventListener 相比，在 div 的 onmouseover 属性上设置该函数没有什么区别。如果这是 Chrome 中的一个已知错误，则 35 分钟以上的谷歌搜索尚未产生结果。有谁知道为什么/如何解决这个问题？

PS，不确定它是否相关，但 Canvas 是图层:它们的大小相同并且完全重叠。

Answer 1

想通了。我在这里发布了答案，以防其他人遇到这个问题。仅当您实际上通过网络服务器查看页面时，它才能在 Chrome 中正常工作。如果你只是用chrome打开文件，是不行的。对于其他浏览器来说这是不正确的。不知道为什么这在除 Chrome 之外的所有版本中都有效，但你已经知道了。