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';
});