obtenez des clics à travers la toile html

en supposant que vous ne pouvez pas placer les liens au-dessus de la toile...

pour les nouveaux navigateurs, utilisez simplement ce CSS:

#canvas { pointer-events:none; }

Et un sale solution de contournement pour IE + les navigateurs plus anciens (vous pouvez supprimer la dépendance sur jQuery):

jQuery('#canvas').click(function(e) {
    window.location = jQuery('#element-under-canvas').attr('href');
});

la réponse courte est que vous ne pouvez pas passer le clic.

mais la deuxième réponse la plus courte est que vous pouvez en effet faire tout ce que votre cœur désire! Tu dois juste être prêt à devenir un peu étrange avec la solution.

la première façon dont je peux penser est légèrement exaspérant mais facile: pour chaque élément derrière la toile, faire un similaire secret de l'élément devant la toile. Alors mettez l'événement que vous voulez sur le secret élément:

<!-- A visible button behind the canvas -->
<button id="but" type="button" style="position: absolute; top: 100px; left: 100px;">Click Me!</button>

<canvas id="can" width="500" height="500" style="position: absolute;"></canvas>

<!-- A near copy of the visible button, but this one is invisible and in front of the canvas! -->
<button id="but" type="button" onclick="alert('click!')" style="position: absolute; top: 100px; left: 100px; opacity: 0;">Click Me!</button>

si vous voulez voir ce code en action cliquez ici

Il y a des moyens un peu plus insensés mais plus maintenables si vous avez une centaine de choses derrière la toile que vous voulez être cliquable, mais c'est probablement le plus facile à faire si vous avez juste 1-3 choses que vous voulez cliquer derrière une toile.

j'ai pu accomplir ceci en plaçant la toile comme ceci:

<div>
    <a href='#'>my link</a>
    <canvas></canvas>
</div>

Puis je l'ai mis à la suite dans le CSS:

canvas {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index:-1; /* NOT SURE HOW SUPPORTED THIS IS, IT WORKED IN CHROME */
}

le lien à l'intérieur de la div était cliquable, indépendamment de tout ce que j'ai peint sur la toile à l'exécution.

Espérons que cette aide!

en empruntant la réponse de Simon Sarris, il peut être plus simple dans certaines situations d'avoir la toile et les commandes sur le même plan. Selon la commande, cela ne permet pas toujours à la toile de dessiner au-dessus de la commande, mais cela ne semble pas nécessaire dans la question originale de Joe. La chose importante est de s'assurer que la toile et les contrôles sont sur le même plan Z, les deux ont un style en utilisant le mot-clé "position", et ont le HTML pour les contrôles être après la déclaration de toile. Le voici un exemple d'une toile combinée avec des commandes utilisant cette méthode.

<canvas id="can" width="500" height="500" style="z-index:2; position: absolute;"></canvas>
<!-- Put text and a link on the same plane as the canvas -->
<div style="position: relative; z-index: 2;">
   <a href="http://www.google.com/">Click</a> this Google link.
</div>

Je ne suis pas sûr de la façon dont la procédure pour cela va, mais Simon Sarris réellement fourni la solution dans les commentaires:

Malheureusement, mon autre méthode ne les travaux de cette instance. :( Cependant, vous on peut toujours jouer avec les opacitésjusqu'à vous avez quelque chose de proche de ce que vous vouloir. Voici un exemple de transparence carte montrant une toile derrière elle. Il apparaît comme si la boîte verte est en haut mais c'est vraiment juste montrer à travers: jsfiddle.net/un9yW/11 Bien sûr, faire cette méthode signifie qu'il n'existe aucun moyen de faire une boîte verte pour couvrir complètement partie de la carte, et ainsi de suite, ce qui est type de lame. Je vais vous laisser savoir si je pensez à quelque chose d'autre qui le fera le travail pour votre situation. - Simon Sarris 7 heures

Voici comment j'ai résolu ce problème...

j'ai un périphérique d'interface utilisateur rond (dessiné sur une toile HTML5, qui est un carré). Seul le cercle est coloré, le reste de la toile est transparent, et je veux cliquer à travers elle. Sous les coins de la toile carrée, il y a des formes sur une scène cinétique JS.

Normalement vous ne pouvez pas cliquer sur une toile.

mais vous pouvez envoyer l'événement de clic à travers à une forme cinétique, et activer les écouteurs d'événement à l'intérieur de cette forme comme ceci:

    $( '#myCanvasUserInterfaceLayer' ).on( 'click', function( e ) {

        var pos = getMousePos( e );
        var obscuredKineticShape = kineticLayer.getIntersection( pos );

   // (Note: console.log(obscuredKineticShape) and you find that 
   // 'getIntersection' returns an object with the topmost shape 
   //  at the click point on the kinetic stage within it, called 'shape').

        obscuredKineticShape.shape.fire( 'mousedown' ); 

    });

     function getMousePos( e ) {

        return {
          x: e.pageX,
          y: e.pageY
        };
      }

je pense que c'est mieux de changer le z-index de façon dynamique. Si vous avez besoin d'utiliser les commandes, définissez leur index z plus élevé que canvas. Si vous avez besoin d'utiliser canvas - set c'est Z-index plus élevé que les contrôles. Exact façon de le faire dépend de votre situation. Vous pouvez écouter les événements de mousedown/mouseup, ou de mousemove sur certaines zones.