javascript - JS event bubbling problem

Question

Case closed: Use CSS to achieve this effect.

Thank you for your help, I switched to CSS to realize this effect.

1. In the following code, I listened to the mouseover and mouseout events of the a tag to trigger the canvas animation. I prevented the event from bubbling in the callbacks of mouseover and mouseout, but when the mouse moves to the two spans inside a The mouseout of a is still triggered, and the mouseover is retriggered when returning to a, causing the animation to be interrupted and executed repeatedly.

Could you please help me see what’s wrong with the following code?

Supplementary animation pictures!

<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

Try this
Poke me=>addEventListener

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

Answer 2

1. First of all, there is a problem with your code. When the mouse is placed on a, the animation is not triggered. It is triggered only when the mouse is placed on the canvas

2. Secondly, the capture of events cannot be blocked, and the bubbling of events is from child elements to parent elements, so the application object of stopPropagation() should be the child element in a

3. I think if you just want a to monitor the entry and removal of the mouse, you should use the mouseenter and mouseleave events, see here

Answer 3

Thank you for your help, I switched to CSS to realize this effect.