J'ai un fichier d'exportation de jeu de construction 2, dans lequel j'ajoute un fichier html dessus. Je souhaite désactiver l'événement on touch / click du canevas généré dynamiquement du jeu de construction 2 car lorsque je clique sur le html ajouté, le clic se propage également à l'élément canevas du jeu.
J'ai utilisé les fonctions event.stopPropagation () et event.preventDefault (), mais en vain.
3 Réponses :
Utilisez uniquement css comme pointer-events: none;
<h2>With Css try to click me..</h2> <canvas id="myCanvas" width="200" height="100" onclick="func()"> </canvas> <h2>Without Css try to click me..</h2> <canvas id="myCanvas2" width="200" height="100" onclick="func()"> </canvas>
#myCanvas{
border: 1px solid #000000;
pointer-events: none;
}
#myCanvas2{
border: 1px solid #000000;
}
function func(){
console.log("clicked");
}
Le problème est que le canevas est généré dynamiquement à partir de l'éditeur de construction 2. Il n'est donc pas pratique pour moi d'ajouter une classe ou un identifiant au canevas et d'ajouter un événement de pointeur. P.S. Les événements de pointeur sur aucun ne fonctionnaient pas
Ajouter dans la propriété css pointer-events: none
S'il ne s'agit que d'un problème de Construct2, je dirais d'ajouter une condition à chaque événement on click qui vérifie si le curseur n'est PAS sur l'élément HTML pour activer les événements de canevas, et non pas si c'est le cas. Comme je ne sais pas trop où se produit le problème, je vais en rester là, j'espère que cela vous aidera!
event.stopPropagation () semble être l'approche correcte pour ce scénario. Pouvez-vous partager du code pour que nous puissions voir ce qui se passe.