Comment puis-je exécuter une fonction sur un événement sur un élément sauf un avec jQuery?

Question

Je veux exécuter une fonction sur un événement sur tout élément mais:

$(":not('#myelement')").bind('mousedown', function() { 
    console.log('mousedown event'); 
}); 

mais quand je clique #myelement, la fonction est exécutée de toute façon, parce que le sélecteur sélectionner tous les parents. De plus, la fonction est exécutée pour chaque parent. Comment puis-je: -exécuter la fonction une seule fois? -ne pas exécuter la fonction sur mon élément?

Voici le numéro complet:

$("#current_page a").toggle(
    function(){ 
     $("#current_menu").hide();      
     return false; 
    }, 
    function(){ 
     $("#current_menu").show(); 
     return false; 
    } 
); 

$(":not(#current_page a)").bind('mousedown',function() {    
    $("#current_menu").hide(); 
}); 

En cliquant sur « #current_page un », l'événement MouseDown est déclenché, et je ne veux pas.

grâce jul

Answer 1

Deux options:

1. Vous pourriez avoir le gestionnaire vérifier la cible de l'événement, et arrêter de fumer si elle est la mauvaise:

   $(':not(#foo)').mousedown(function(ev) { 
       if ($(ev.target).is('#foo')) return false; 
       // other stuff 
   }); 
   

2. Vous pouvez ajouter un gestionnaire en particulier pour le mauvais élément et le faire tuer l'événement:

   $(':not(#foo)').mousedown(...); 
   $('#foo').mousedown(function() { return false; }); 
   

Answer 2

Retirez vos citations en '#myelement' ... Juste :not(#myelement). Tu devrais être bon.

Edit: Ajouter un chèque en cas en cochant la event.target pour résoudre un problème potentiel de bouillonnement:

function eventFunc(event) { 
    if ($(event.target).attr("id") !== 'myelement') { 
     // do work 
    } 
} 

Answer 3

Voici un exemple complet qui devrait faire ce que vous avez besoin ...

$(":not(#myelement)").bind('mousedown', function(event) { 
    console.log('mousedown event'); 
    event.stopPropagation() 
}); 

Note importante (basé sur le commentaire de juillet)

l'événement sera ajouté à chaque élément sur la page, à l'exception de l'élément un avec un id de « myElement ». J'ai mis cette démo rapide ensemble pour démontrer ...

Vous remarquerez que l'alerte onclick ("hi") ne se fait jamais appeler, peu importe où vous cliquez - cela démontre que la propagation d'événements est empêchée. Vous remarquerez également que lorsque vous cliquez sur "myelement" que l'événement pour le parent est appelé - parce que vous n'avez pas ajouté le gestionnaire d'événements à cet élément. Je vais expliquer ci-dessous comment vous pouvez résoudre ce problème. Voici l'exemple.

<div oclick="alert('hi');" id="a"> 
    <div id="b">One</div> 
    <div id="c">One</div> 
    <div id="d">One</div> 
    <div id="e">One</div> 
    <div id="f">One</div> 
    <div id="myelement">Not One</div> 
    <div id="h">One</div> 
    <div id="i">One</div> 

</div> 

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
    $(":not(#myelement)").bind('mousedown', function(event) { 
     alert($(this).attr("id")); 
     event.stopPropagation() 
    }); 
</script> 

Et vous devez faire ce qui suit pour arrêter clique sur « myElement » de provoquer l'élément parent pour déclencher:

$(":not(#myelement)").bind('mousedown', function(event) { 
    console.log('mousedown event'); 
    // event.stopPropagation() - you might not want this anymore - up to you... 
    // I think you wanted clicks on "myelement" to be ignored, rather than 
    // event propagation to be prevented 
}); 
$("#myelement").bind('mousedown', function(event) { 
    event.stopPropagation() 
});