obtenir des clics à travers la toile html

Si la croix de la fonctionnalité de navigateur n'est pas une exigence, il existe une solution facile. Sur les navigateurs qui prennent en charge pour des éléments SVG(webkit, Mozilla et peut-être d'autres, mais surtout pas IE), vous pouvez utiliser la propriété css appelé pointeur-événements. À partir du MDN:

"La propriété CSS pointeur-événements permet aux auteurs de contrôler dans quelles circonstances (le cas échéant) un particulier élément graphique peut devenir la cible des événements de la souris. Lorsque cette propriété est spécifiée, les mêmes caractéristiques de la visiblePainted valeur s'applique à un contenu SVG.

En outre à indiquer que l'élément n'est pas la cible des événements de la souris, la valeur none indique à l'événement de la souris pour aller "à travers" l'élément cible et tout ce qui est "en dessous" de cet élément à la place.

Avertissement: L'utilisation de pointeur-événements dans le CSS pour les non-éléments SVG est expérimental. Il est actuellement défini dans le CSS3 UI projet de spécification, il y a la discussion de la reporter à CSS4."

À tout le moins, vous pouvez utiliser Modernizr pour détecter pointeur-manifestations de soutien et de faire l'opacité truc mentionné dans Simon Sarris réponse sur les navigateurs qui ne supportent pas.

Aussi, si votre demande est spécifique à google maps, vous pouvez insérer votre toile comme une carte google maps de superposition, évitant ainsi le problème tous ensemble.

Exemple:
http://www.patrick-wied.at/static/heatmapjs/demo/maps_heatmap_layer/gmaps.php

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

Mais la seconde plus courte réponse est que vous pouvez en effet faire tout ce que votre coeur désire! Vous avez juste à être prêt à obtenir un peu étrange avec la solution.

La première façon que je peux penser est un peu rageant, mais facile: Pour chaque élément, derrière la toile, faire un secrets similaires élément en face de la toile. Ensuite, mettre l'événement que vous souhaitez sur le secret de l'é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 le code en action cliquez ici

Il y a un peu plus-fou-encore-plus-facile à maintenir les façons, si vous avez une centaine de choses derrière la toile vous souhaitez être cliquable, mais c'est probablement le plus facile à faire si vous avez juste 1-3 choses que vous souhaitez, cliquez derrière une toile.

Emprunt de Simon Sarris réponse, il peut être plus simple dans certaines situations, d'avoir de la toile & des contrôles sur le même plan. Selon le contrôle, il ne le permettent pas toujours de la toile dessiner sur le contrôle, mais cela ne semble pas être nécessaire dans Joe question d'origine. La chose importante est de s'assurer que la toile et les commandes sont sur le même plan Z, les deux ont un style à l'aide de la "position" de mots clés, et ont le HTML pour les contrôles après le canevas de déclaration. L'exemple suivant est un exemple d'une toile combiné avec des contrôles à l'aide de 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>

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

J'ai un tour de l'interface utilisateur de l'appareil (tiré sur une plaine HTML5 canvas, qui est un carré).
Seul le cercle est de couleur, le reste de la toile est transparent, et j'ai envie de cliquer à travers elle. Dans les coins de la place de la toile, il y a des formes sur une Cinétique JS scène.

Normalement vous ne pouvez pas cliquer sur une toile.

Mais vous pouvez envoyer l'événement de clic grâce à une Cinétique de forme, et d'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
        };
      }