How do I execute a function on an event on any element but one with jQuery?

Question

hi,

I want to execute a function on an event on any element but one:

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

but when I click #myelement, the function is executed anyway, because the selector select all the parents. Moreover, the function is executed for every parent. How can I: -execute the function only once? -not execute the function on my element?

Here's the full issue:

$("#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();
});

When clicking on "#current_page a", the mousedown event is triggered, and I don't want to.

thanks jul

Answer 1

Two options:

1. You could have the handler check the event target, and quit if it's the bad one:

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

2. You could add a handler especially for the bad element and make it kill the event:

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

Answer 2

Remove your quotes in '#myelement'... Just :not(#myelement). You should be good.

Edit: Add a check in the event by checking the event.target to fix a potential bubbling problem:

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

Answer 3

Here is a full example that should do what you require...

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

Important note (based on Jul's comment)

The event will be added to EVERY element on the page, except for the one element with an id of "myelement". I have put this quick demo together to demonstrate...

You'll notice that the onclick alert("hi") never gets called, no matter where you click - this demonstrates event propagation being prevented. You'll also notice that when you click on "myelement" that the event for the parent is called - because you haven't added the event handler to this element. I'll explain below how you can fix this. Here's the example.

<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>

And you will need to do the following to stop clicks on "myelement" from causing the parent element to trigger:

$(":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()
});