je ne pouvais pas toujours utiliser pointer-events: none dans mon scénario parce que je voulais tous les deux la superposition et Les éléments sous-jacents doivent être cliquables / sélectionnables.

La structure DOM ressemblait à ceci:

<div id="outerElement">
   <div id="canvas-wrapper">
      <canvas id="overlay"></canvas>
   </div>
   <!-- Omitted: element(s) behind canvas that should still be selectable -->
</div>

(Le outerElement, canvas-wrapper et canvas Les articles sont de la même taille.)

Pour que les éléments derrière la toile fonctionnent normalement (par exemple, sélectionnables, modifiables), j’ai utilisé le code suivant:

canvasWrapper.style.pointerEvents="none";

outerElement.addEventListener('mousedown', event => {
    const clickedOnElementInCanvas = yourCheck // TODO: check if the event *would* click a canvas element.
    if (!clickedOnElementInCanvas) {

        // if necessary, add logic to deselect your canvas elements ...

        wrapper.style.pointerEvents="none";
        return true;
    }

    // Check if we emitted the event ourselves (avoid endless loop)
    if (event.isTrusted) {
        // Manually forward element to the canvas
        const mouseEvent = new MouseEvent(event.type, event);
        canvas.dispatchEvent(mouseEvent);
        mouseEvent.stopPropagation();
    }
    return true;
});

Certains objets de canevas étaient également fournis avec des champs de saisie, je devais donc également autoriser les événements de clavier. Pour ce faire, j’ai dû mettre à jour cela pointerEvents Propriété selon que le champ de saisie d’un canevas était actuellement ciblé ou non:

onCanvasModified(canvas, () => {
    const inputFieldInCanvasActive = // TODO: Check if an input field of the canvas is active.
    wrapper.style.pointerEvents = inputFieldInCanvasActive  ? 'auto' : 'none';
});