Solution de contournement pour arrêter la propagation avec live()?

Question

J'ai rencontré le problème qui a été résolu here sans solution de contournement: Je ne peux pas utiliser stopPropagation() sur des éléments générés dynamiquement.

J'ai essayé de créer une condition pour exclure un clic dans les dimensions de l'élément engendré, mais cela ne semble pas fonctionner du tout.

Voici ce que je suis:

1) un grand élément de fond (« toile ») qui est activé pour être « sensible aux clique dessus » par un bouton

2) la toile, si activé, attrape tous les clics et génère un petit enfant ("enfant")

3) l'enfant est positionné par rapport à la position du clic de la souris. Si le clic de la souris était sur la moitié droite de la toile, l'enfant sera positionné à 200 pixels à gauche de ce point. (A droite si le clic est dans la moitié gauche)

4) chaque nouveau clic sur la toile supprime l'enfant existant (le cas échéant) et engendre un nouvel enfant à la nouvelle position (par rapport au clic)

Le problème: Puisque l'élément enfant engendré se trouve au-dessus du canevas, un clic dessus compte comme un clic sur le canevas. Même si l'enfant est en dehors des limites de la toile, cliquer dessus déclenchera l'action comme décrit en 4). Cela ne devrait pas arriver.

CODE ===========: Le bouton pour activer la toile:

$('a#activate').click(function(event){ 
    event.preventDefault(); 
    canvasActive(); 
}); 

Je référencé ci-dessus pour vous montrer que la toile cliquez accrocheur se produit dans une fonction . Je ne sais pas si cela est pertinent ...

C'est la fonction qui attire des clics sur la toile:

function canvasActive() { 
    $('#canvas').click(function(e){ 
     e.preventDefault(); 

     //get click position relative to canvas 
     posClick = { 
      x : Math.round(e.pageX - $(this).offset().left), 
      y : Math.round(e.pageY - $(this).offset().top) 
     }; 

     //calculate child position 
     if(posClick.x <= $canvas.outerWidth(false)/2) { 
      posChild = { 
       x: posClick.x + 200, //if dot is on the left side of canvas 
       y: posClick.y 
      }; 
     } else { 
      posChild = { 
       x: posClick.x - 600, //if dot is on the right 
       y: posClick.y 
      }; 
     } 

     $(this).append(markup); //markup is just the HTML for the child 

    }); 
} 

J'ai laissé les choses sans importance. La question est:

Comment puis-je empêcher un clic à l'intérieur d'un enfant engendré d'exécuter la fonction? J'ai essayé d'obtenir les dimensions de l'enfant et de faire quelque chose comme «si PosClick est dans cette fourchette, ne fais rien» - mais je n'arrive pas à le comprendre.

Peut-être que quelqu'un a déjà rencontré ce dilemme auparavant. Toute aide est appréciée.

Answer 1

Je ne vois aucun code jQuery .live(). Les événements réguliers ajoutés avec bind, click, etc. ne sont pas des événements "en direct".

Dans tous les cas, tout ce que vous devez faire est de vérifier ici l'élément qui was passed into l'événement pour voir si elle est la toile:

$('#canvas').click(function(e){ 
    if($(this).is('#canvas')){ 
     // it really was the canvas that was clicked! 
     // could also check "e.currentTarget"--it's the same as "this" 
     // do your thing and return false 
    } 
}