comment sélectionner uniquement l'arrière-plan dans jQuery

Je voudrais ajouter deux événements à mes articles.comment sélectionner uniquement l'arrière-plan dans jQuery

Un pour le « fond » du document: $(document).click(function() {do()});

Un pour les divs dans le document: $("div").click(function() {do2()});

Le problème est que lorsque je clique sur un div, les deux fonctions, do et do2 sont appelé.

Comment puis-je dire d'appeler do() uniquement lorsque je ne clique sur aucun élément?

Merci pour votre aide,

Source

2009-01-27 Anonymous

-2

vous pouvez essayer les hors div s du sélecteur de document.

$(document:not(div)).click(function() {do()}); 

$("div").click(function() {do2()});

non testé cependant.

edit: j'ai réalisé que ma réponse est, en effet, fausse. Je vais garder ça ici pour montrer la mauvaise façon de faire cette chose. Pour les bonnes, recherchez les réponses upvoted.

Source

2009-01-27 17:23:34 andyk

L'astuce consiste à retourner false à partir des gestionnaires d'événements. Cela empêchera la propagation de l'événement.

Cela semble fonctionner pour moi:

<html><head> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script> 
<script type="text/javascript"><!-- 
$(document).ready(function() { 
    $(document).click(function() { 
     alert('document'); return false; 
    }); 
    $('#my_div').click(function() { 
     alert('div'); return false; 
    }); 
}); 
--></script> 
<body> 
<h1>hello!</h1> 
<div id="my_div">this div is special</div> 
</body></html>

Source

2009-01-27 17:31:31 che

Vous devez appeler stopPropagation(). Les exemples Andyk et Stans échouent tous pour moi dans Firefox.

Ici, j'ai testé cela dans Firefox et cela fonctionne.

$("html").click(function(event){ 
    event.stopPropagation(); 
    alert('document'); 
}); 

$("div").click(function(event){ 
    event.stopPropagation(); 
    alert('div'); 
});

Source

2009-01-27 18:01:31 gradbot

belle réponse. Merci d'avoir clarifié le mien. :) – andyk

;) merci d'être un bon sport. – gradbot

Les termes que vous cherchez ici sont Propagation d'événements ou Event Bubbling.

La gestion des événements dans les navigateurs "modernes" (qui est le modèle dans lequel la plupart des bibliothèques se connectent) fonctionne en faisant bouillir l'arborescence du document. Ce que cela signifie est que si vous avez la structure html document comme celui-ci

<body> 
    <div> 
     <ul> 
      <li>Foo</li> 
      <li>Bar</li> 
      <li>Baz</li> 
     </ul> 
    </div> 
</body>

et clique sur Foo, les trucs des événements suivants se produit

Le <li> reçoit un événement click
Le <ul> reçoit un événement de clic
Le <div> reçoit un événement de clic
Le corps < > reçoit un événement click

C'est ce qui vous arrive. Il y a deux choses que vous pouvez faire pour éviter cela.

La première, comme beaucoup l'ont suggéré est, si votre gestionnaire d'événements retourne false, la propagation des événements s'arrêtera à l'élément qui a été cliqué. (Ce qui est de savoir comment gère jQuery il, chaque bibliothèque a une approche différente)

$(document).ready(function() { 
    //hookup events for entire body of document 
    $('body').bind('click', function(e){ 
     //do clicked body stuff 
    }); 
    //hookup our divs, returning false to prevent bubbling 
    $('div').bind('click', function(e){ 
     //do clicked div stuff 
     return false; //stop event propagation 
    });  
});

Une seconde, certains soutiendraient mieux, approche consiste à utiliser la délégation de l'événement. délégation de l'événement, dans le contexte de Javascript et le DOM, est l'endroit où vous joignez un seul gestionnaire d'événement à un élément extérieur (dans ce cas le corps), puis basé sur quel élément a été initialement cliqué, prendre une action particulière.

Quelque chose comme ça.

$(document).ready(function() { 
     //event delegate 
     $('body').bind('click', function(e){ 
       var originalElement = e.srcElement; 
       if(!originalElement){originalElement=e.originalTarget;} 
       if ($(originalElement).is('div')) { 
        console.log("A div!"); 
       } 
       else if ($(originalElement).is('div#inside')) { 
        console.log("A Specific Div!"); 
       } 
       else{ 
        console.log("Something else!"); 
       }     
     }); 
});

Les benifits de ce sont deux fois. Tout d'abord, vous pouvez centraliser tout votre code de gestion des événements dans un seul endroit dans votre code. Le second (plus important dans mon esprit) est d'attacher un seul gestionnaire d'événements qui consomme beaucoup moins de mémoire du navigateur et vous met en place pour de meilleures performances aller de l'avant.

Source

2009-01-27 18:14:37

Le semble la réponse la plus complète jusqu'à présent. Je pense que vous pouvez également envelopper le originalElement avec $(), puis utiliser des sélecteurs de fantaisie dans .is() pour savoir ce qu'il est en réalité. – che

Bon point, le code a changé pour refléter cela. –

comment sélectionner uniquement l'arrière-plan dans jQuery

Répondre

Questions connexes