javascript – Problem mit der Blasenbildung bei JS-Ereignissen

Question

Fall abgeschlossen: Verwenden Sie CSS, um diesen Effekt zu erzielen.

Vielen Dank für Ihre Hilfe, ich bin auf CSS umgestiegen, um diesen Effekt zu erzielen.

1. Im folgenden Code habe ich mir die Mouseover- und Mouseout-Ereignisse des a-Tags angehört, um die Canvas-Animation auszulösen. Das Sprudeln des Ereignisses wurde in den Rückrufen von Mouseover und Mouseout verhindert, aber es wurde trotzdem ausgelöst, wenn die Maus zum a-Tag bewegt wurde zwei Spannen innerhalb von a. Das Mouseout von a wurde ausgelöst und das Mouseover wurde bei der Rückkehr zu a erneut ausgelöst, wodurch die Animation unterbrochen und wiederholt ausgeführt wurde.

Bitte helfen Sie mir herauszufinden, was mit dem folgenden Code nicht stimmt.

Animierte Bilder hinzugefügt!

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