2010-12-01 11 views
1

Je voudrais mettre en œuvre la solution comme ceclics en dehors d'un élément sans jquery

How do I detect a click outside an element?

mais j'utilise une autre javascript bibliothèque fonction $() déjà définie

Toutes les suggestions?

+0

Quelle est l'autre bibliothèque? Pourquoi n'utilisez-vous pas cela, ou une solution non-bibliothèque. Je ne chargerais pas une autre bibliothèque pour une seule fonction. – user113716

+0

@patrick. Oui, je charge jquery uniquement pour lancer la fonctionnalité "click extérieur". Je n'ai trouvé aucun code autonome dans les 20 minutes de googling. Sur les grandes solutions de bibliothèque. – Dan

+0

Dans ce cas, je vais ajouter une réponse en utilisant une solution native. Si votre autre bibliothèque a des méthodes pour ajouter des gestionnaires 'click', alors vous pouvez aussi le faire avec cette bibliothèque. Voir ma réponse ci-dessous. – user113716

Répondre

4

Cela est facile à accomplir. Il serait dommage de charger la bibliothèque jQuery juste pour une fonctionnalité. Si l'autre bibliothèque que vous utilisez gère la liaison d'événements, vous pouvez faire la même chose dans cette bibliothèque. Puisque vous n'avez pas indiqué ce que d'autres bibliothèque est, voici une solution native:

Exemple:http://jsfiddle.net/patrick_dw/wWkJR/1/

window.onload = function() { 

    // For clicks inside the element 
    document.getElementById('myElement').onclick = function(e) { 
      // Make sure the event doesn't bubble from your element 
     if (e) { e.stopPropagation(); } 
     else { window.event.cancelBubble = true; } 
      // Place the code for this element here 
     alert('this was a click inside'); 
    }; 

    // For clicks elsewhere on the page 
    document.onclick = function() { 
     alert('this was a click outside'); 
    }; 
}; 
0

ajouter également ici le code de cet événement cesse de bouillonner. Trouvé sur quircksmode.org

function doSomething(e) { 
    if (!e) var e = window.event 
    // handle event 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
} 
+0

Ce script semble être la copie exacte de la solution donnée par patrick dw. Je vais supprimer mon post si c'est vrai. Est-ce? – Dan

+0

Dan - Fondamentalement la même chose. Ceci est simplement une solution multi-navigateur pour empêcher un événement de bouillonner. IE utilise 'window.event.cancelBubble' tandis que les navigateurs compatibles W3C utilisent' e.stopPropagation() '. C'est ce qui empêche l'événement à l'intérieur de votre élément de bouillonner vers le gestionnaire placé sur le 'document' dans ma réponse. – user113716