Question

基本上，我从头开始编写了一个canvas js，它在鼠标事件上产生气泡。现在我的页面上只有几个元素/按钮。即使当我将它们悬停在画布上时，它们也会产生气泡，如何停止在特定元素上发送鼠标事件。请注意，我对这些按钮具有悬停效果，但是不确定是否重要。我非常感谢您的帮助，因为我无法为此找到解决方案。

Answer 1

您能否提供一个最小的例子，以便我们确切地知道您在说什么。最好使用工具栏中的<>按钮（在图像旁边），以便您可以编辑HTML，CSS和JS，同时还可以在iframe中生成结果。

完成此操作后，我将返回并编辑此答案，这是我们需要查看的示例（点击“运行代码段”以查看iframe）：

//Preparing canvas
const canvas = document.querySelector("#myCanvas");
let c = canvas.getContext("2d");
let fullWidth = canvas.width;
let fullHeight = canvas.height;

//utiliy functions
function isArray(object) {
    return Object.prototype.toString.call(object) == "[object Array]";
}

function isNumber(object) {
    return typeof object == "number";
}

function random(min, max) {
    if (isArray(min)) return min[~~(Math.random() * min.length)];
    if (!isNumber(max)) (max = min || 1), (min = 0);
    return min + Math.random() * (max - min);
}

//Circle class for circle objects
class Circle {
    constructor(x, y, radius) {
        this.alive = true;

        this.radius = radius;
        this.wander = 0.15;
        this.theta = random(2 * Math.PI);
        this.drag = 0.92;
        this.color = "#092140";

        this.x = x || 0.0;
        this.y = y || 0.0;

        this.vx = 0.0;
        this.vy = 0.0;
    }

    draw() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        c.fillStyle = this.color;
        c.fill();
    }

    move() {
        this.x += this.vx;
        this.y += this.vy;

        this.vx *= this.drag;
        this.vy *= this.drag;

        this.theta += random(-0.5, 0.5) * this.wander;
        this.vx += Math.sin(this.theta) * 0.1;
        this.vy += Math.cos(this.theta) * 0.1;

        this.radius *= 0.95;
        this.alive = this.radius > 0.5;
        this.draw();
    }
}

window.addEventListener("mousemove", function(event) {
    console.log(event.target.classList[0])
    if (event.target.classList[0] !== "fab"
        && event.target.id !== "social"
        && event.target.classList[0] !== "buttons-ul"
        && event.target.classList[0] !== "resume-li"
        && event.target.classList[0] !== "portf-btn") {
        
        let nx = event.x;
        let ny = event.y;
        console.log(nx + ", " + ny);

        init(nx, ny, 40);
        init(nx + random(5, 10), ny+random(5, 10), 40);
        init(nx + random(5, 15), ny+random(5, 15), 35);
    }
});

const circles = {};

// const COLORS = ["#004B8D", "#0074D9", "#4192D9", "#7ABAF2", "#D40D12", "#FF1D23"];

const COLORS = [
  '#E3F2FD', '#BBDEFB', '#90CAF9', '#64B5F6', '#42A5F5', '#2196F3', '#1E88E5', '#1976D2', '#1565C0', '#0D47A1', // Blue 50->900
  '#FFF8E1', '#FFECB3', '#FFE082', '#FFD54F', '#FFCA28', '#CC3B58', '#C93A29', '#FF3932', '#ED2938', '#C03A4C' // Amber 50->900
];

let key = 0;

function updateKey() {
    key++;
    key = key % 3000;
}

function init(x, y, maxRadius) {
    let circle, theta, force;

    circle = new Circle(x, y, random(10, maxRadius));
    circle.wander = random(0.5, 2.0);
    circle.drag = random(0.9, 0.99);
    theta = random(2 * Math.PI);
    force = random(2, 8);
    circle.vx = Math.sin(theta) * force;
    circle.vy = Math.cos(theta) * force;
    circle.color = random(COLORS);
    circles[key] = circle;
    updateKey();
}

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, innerWidth, innerHeight);
    for (let k in circles) {
        if (!circles[k].alive) {
            delete circles[k];
        } else {
            circles[k].move();
        }
    }
}

animate();

#root {
  background-color: black;
  padding: 15px;
}

#myCanvas {
  border: 2px solid white;
  width: 100px;
  height: 100px;
}

<div id="root" class="fab">
  <canvas id="myCanvas" class="drawable" width="200" height="200">
  
  </canvas>
</div>

Answer 2

您可能正在使用相同的类或其他类。您可以使用event.stopPropagation（）;

如何禁用某些元素上的鼠标事件？

2 个答案: