javascript - Problème de bouillonnement d'événements JS

Question

Affaire classée : utilisez CSS pour obtenir cet effet.

Merci pour votre aide, je suis passé au CSS pour réaliser cet effet.

1. Dans le code suivant, j'ai écouté les événements mouseover et mouseout de la balise a pour déclencher l'animation du canevas. Le bouillonnement de l'événement a été empêché dans les rappels de mouseover et mouseout, mais il était toujours déclenché lorsque la souris se déplaçait vers le. deux étendues à l'intérieur de a. La sortie de la souris de a a été déclenchée et le survol de la souris a été redéclenché lors du retour à a, provoquant l'interruption et l'exécution répétée de l'animation.

S'il vous plaît, aidez-moi à voir quel est le problème avec le code suivant ?

Ajout d'images animées !

<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

试试这样
Poke me=>addEventListener

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

Answer 2

1. Tout d'abord, il y a un problème avec votre code Lorsque la souris est placée sur un, l'animation ne se déclenche pas. Elle ne se déclenche que lorsque la souris est placée sur le canevas

.

2. Deuxièmement, la capture des événements ne peut pas être empêchée et la propagation des événements se fait des éléments enfants vers les éléments parents, donc l'objet d'application de stopPropagation() doit être l'élément enfant dans a

3. Je pense que si vous souhaitez simplement surveiller l'entrée et la suppression de la souris, vous devez utiliser les événements mouseenter et mouseleave, voir ici

Answer 3

Merci pour votre aide, je suis passé au CSS pour réaliser cet effet.