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来现实此动效了。