Как отключить событие мыши на определенных элементах?

Question

По сути, я написал холст js с нуля, который создает пузыри на событиях мыши.Теперь на моей странице мало элементов / кнопок.Даже когда я парю над ними, мой холст генерирует пузыри, как я могу остановить отправку событий мыши на определенные элементы.Обратите внимание, что у меня есть эффекты наведения на эти кнопки, хотя я не уверен, что это важно.Я действительно ценю любую помощь, так как я не мог найти решение для этого.

Answer 1

Возможно, вы используете те же классы или что-то в этом роде.Вы можете использовать event.stopPropagation ();

Answer 2

Можете ли вы привести минимальный пример, чтобы мы точно знали, о чем вы говорите.Желательно использовать кнопку <> на панели инструментов (рядом с изображениями), чтобы вы могли редактировать 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>