javascript - JS事件冒泡問題

Question

結案：改用CSS來實現此動效了。

謝謝各位的幫助，改用CSS來現實此動效了。

1、我在下述程式碼中監聽了a標籤的mouseover和mouseout事件來觸發canvas動畫，在mouseover、mouseout的回調中阻止了事件冒泡，但當滑鼠移動到a內部的兩個span上時還是觸發了a的mouseout，再回到a上時又重新觸發了moueover，導致動畫被中斷重複執行。

各位幫我看看 以下程式碼有什麼不妥？

補充動效圖！

#

<a href="/map.html" class="material-block top-border-54c889" data-color="#54c889">
    <span class="menu-index-svg"><svg class="icon" width="32px" height="32px" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg></span>
    <span class="menu-index-text">地图监控</span>
    <canvas style="width: 100%; height: 100%;" width="160" height="90"></canvas>
</a>

<script>
var canvas = {},
    centerX = 0,
    centerY = 0,
    color = '',
    containers = document.getElementsByClassName('material-block'),
    context = {},
    element = {},
    radius = 0

    requestAnimFrame = function () {
        return (
            window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            }
        );
    }(),

    init = function () {
        containers = Array.prototype.slice.call(containers);
        for (var i = 0; i < containers.length; i += 1) {
            canvas = document.createElement('canvas');
            console.log(containers[i]);
            containers[i].addEventListener('mouseover', press, false);
            containers[i].addEventListener('mouseout', pressout, false);
            containers[i].appendChild(canvas);
            canvas.style.width = '100%';
            canvas.style.height = '100%';
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
        }
    },

    press = function (event) {
        console.log('press');
        color = event.toElement.parentElement.dataset.color;
        element = event.toElement;
        context = element.getContext('2d');
        radius = 0;
        centerX = 0;
        centerY = 0;
        context.clearRect(0, 0, element.width, element.height);
        draw();
        event.stopPropagation();
    },

    pressout = function (event) {
        console.log('pressout');
        event.stopPropagation();
    },

    draw = function () {
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = color;
        context.fill();
        radius += 15;
        if (radius < element.width + 100) {
            requestAnimFrame(draw);
        }
    };

init();
</script>

Answer 1

試試這樣
戳我=>addEventListener

containers[i].addEventListener('mouseover', press, true);
containers[i].addEventListener('mouseout', pressout, true);

Answer 2

1. 首先，你這個程式碼是有問題的，滑鼠放到a上時，並沒有觸發動畫，放到canvas上才觸發的

2. 其次，事件的捕獲是不能阻止的，而事件的冒泡是從子元素到父元素的，所以stopPropagation()的應用對象應該是a裡面的子元素

3. 我認為你如果想只是讓a監聽滑鼠的進入和移出，應該使用mouseenter和mouseleave事件，看這裡

Answer 3

謝謝各位的幫助，改用CSS來現實此動效了。