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>

带有图标的工具栏应显示当用户将鼠标悬停在包含画布的div上时，隐藏在mouseout上。使用图像，将鼠标悬停在它们上面会添加一个包含css filter属性的类来反转颜色。所有这一切都与Safari 7.1中的预期完全一致，甚至在FF 28上也是如此。但是，在chrome中，事件仅在点击canvasWrapper div之外时触发。与onmouseover相比，在div的addEventListener属性上设置函数没有任何区别。如果这是Chrome浏览器35分钟以上的已知错误，那么谷歌就没有产生结果。有谁知道为什么/如何解决这个问题？

PS，不确定它的相关与否，但画布是图层：它们都是相同的尺寸并且完全重叠。提前谢谢。

Answer 1

想出来。我在这里发布了答案，以防其他人有这个问题。如果您实际通过网络服务器查看页面，它在chrome 中工作正常。如果您只是用chrome打开文件，它就不起作用。这与其他浏览器不一致。不知道为什么这个除了chrome之外的所有东西都有效，但是你有它。

Mouseout和Mouseover事件未在chrome 39中正确触发

1 个答案: