cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Masalah menggelegak acara JS

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>
学习ing学习ing2723 hari yang lalu809

membalas semua(3)saya akan balas

  • 代言

    代言2017-06-12 09:34:56

    试试这样
    Poke me=>addEventListener

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

    balas
    0
  • 阿神

    阿神2017-06-12 09:34:56

    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

    balas
    0
  • 世界只因有你

    世界只因有你2017-06-12 09:34:56

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

    balas
    0
  • Batalbalas