CODEWITHSUNDEEP
javascriptgoogle-chromedom-events
Jared Smith
Jared Smith

Reputation: 21926

Mouseout and Mouseover events not firing properly in Chrome 39

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>

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, not sure its relevant or not but the canvases are layers: they all are the same size and overlap exactly.

Upvotes: 0

Views: 1730

Answers (1)

Jared Smith
Jared Smith

Reputation: 21926

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.

Upvotes: 1

Related Questions