Mouseout和Mouseover事件未在chrome 39中正确触发 [英] Mouseout and Mouseover events not firing properly in chrome 39

问题描述

使用chrome 39（适用于Mac）以下功能无法使用

Using chrome 39 (for Mac) the following does not work

<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过滤器属性的类来反转颜色。所有这些在Safari 7.1中甚至在FF 28上完全按预期工作。但是，在chrome中，只有在 canvasWrapper div上单击或外部时才会触发事件。在div的 onmouseover 属性上设置函数与 addEventListener 相比没有区别。如果这是Chrome浏览器35分钟以上的已知错误，那么谷歌就没有产生结果。有谁知道为什么/如何解决这个问题？

The toolbar with the icons should reveal when the user mouses over the canvas-containing div, hide on mouseout. With the images, mousing over them adds a class that contains the css filter property to invert the colors. All this works exactly as expected in Safari 7.1 and even on FF 28. However, in chrome the events only trigger when clicking on or outside the canvasWrapper div. Setting the function on the onmouseover property of the div makes no difference compared to addEventListener. If this is a known bug in chrome 35+ minutes of googling it has not yielded results. Does anyone know why/how to fix this?

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

PS, not sure its relevant or not but the canvases are layers: they all are the same size and overlap exactly. Thanks in advance.

推荐答案

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

Figured it out. I posted the answer here in case anyone else has this problem. It works fine in chrome only if you are actually viewing the page through a webserver. If you just open the file with chrome, it does not work. This is untrue with the other browsers. Not sure why this works in everything but chrome, but there you have it.

这篇关于Mouseout和Mouseover事件未在chrome 39中正确触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！