javascript - Masalah menggelegak acara JS

Question

Kes ditutup: Gunakan CSS untuk mencapai kesan ini.

Terima kasih atas bantuan anda, saya beralih kepada CSS untuk merealisasikan kesan ini.

1 Dalam kod berikut, saya mendengar peristiwa alih tetikus dan tetikus pada teg untuk mencetuskan animasi kanvas Acara menggelegak telah dihalang dalam panggilan balik alih tetikus dan tetikus, tetapi ia masih dicetuskan apabila tetikus dialihkan ke. dua rentang di dalam a. Keluar tetikus a telah dicetuskan, dan alih tetikus dicetuskan semula apabila kembali ke a, menyebabkan animasi terganggu dan dilaksanakan berulang kali.

Sila bantu saya melihat apa yang salah dengan kod berikut?

Menambah gambar animasi!

<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. Pertama sekali, terdapat masalah dengan kod anda Apabila tetikus diletakkan pada a, animasi tidak dicetuskan hanya apabila tetikus diletakkan pada kanvas

2. Kedua, penangkapan peristiwa tidak boleh dihalang, dan menggelegak peristiwa adalah daripada elemen anak kepada elemen induk, jadi objek aplikasi stopPropagation() harus menjadi elemen anak dalam a

3. Saya rasa jika anda hanya mahu memantau kemasukan dan penyingkiran tetikus, anda harus menggunakan acara mouseenter dan mouseleave, lihat di sini

Answer 3

Terima kasih atas bantuan anda, saya beralih kepada CSS untuk merealisasikan kesan ini.