Hiding menu by clicking any where in the page

Question

I have this code but it seems that it always fire the event attached to 'html', because when i click on the .optTrigger then menu shows, and click on it again, it does that flickering thing, it hides the menu for a second and shows it again, so i guess it fires the 'html' click event.

Try it : here's the site uploaded, you have to add a new task, and click on the options trigger, it's the arrow button next to the check button in the new task, far right. HERE

Here's my code :

html:

<div class="mainTaskWrapper clearfix">
    <div class="mainMarker"></div>
    <label class="mainTaskLabel"></label>
    <div class="mainHolder"></div>
    <div class="subTrigger opened"></div>
    <div class="checkButton"></div>
    <div class="optTrigger"></div>
    <div class="addSubButton"></div>
    <div class="dateInfo"></div>
    <div class="mainOptions">
        <ul>
            <li id="mainInfo">Details</li>
            <li id="mainEdit">Edit</li>
            <li id="mainDelete">Delete</li>
        </ul>
    </div>
</div>

script:

$("#tasksWrapper").on("click", ".mainTaskWrapper .optTrigger", function(evt){
    $(this).siblings(".mainOptions").fadeToggle(100);
    $(this).toggleClass("active");
    evt.stopPropagation();      
});

$("html").on("mousedown",function(){            
    $(".optTrigger").siblings(".mainOptions").hide();
    $(".optTrigger").removeClass("active");
});

I can't understand your question. Please create an example at http://jsfiddle.net — Explosion Pills, Sep 04 '12 at 22:56
@Rafael Do you really have to add a _new_ `mousedown` event handler each time someone clicks on `.optTrigger` div? — raina77ow, Sep 04 '12 at 22:57
@raina77ow Mmmmm, i was thinking of moving it outised, i've edited the code above. But the issue still occurs. Thanks. — Rafael Adel, Sep 04 '12 at 23:02
@ExplosionPills It's actually a part of a large site, but i will do my best separating only this section and put it into jsfiddle. — Rafael Adel, Sep 04 '12 at 23:02
Well you definitely don't need to encapsulate `this` in with `$()` because `$()` is the selector, `this` is already assigned. What is `tasksWrapper`? — Nate-Wilkins, Sep 04 '12 at 23:04
`$` will make `this` a jQuery object. Necessary because the trailing function wouldn't been available. But the assignment to `trgrBtn` seems unnecessary. — nuala, Sep 04 '12 at 23:07
I've removed the `trgrBtn` assignment, it was from a previous version of the code, sorry. — Rafael Adel, Sep 04 '12 at 23:09
All the elements are inside the `html` tag, so when clicking on the elements that are supposed to open your menu, you'll also trigger the click on `html` as it bubbles, and both handlers are executed. Also, you don't exclude the menu in the `html` handler, so any click on the menu will also trigger the `html` handler, making the menu useless as it will close on any click. It's just all in all flawed logic. — adeneo, Sep 04 '12 at 23:10
Hmmm, but i've added `evt.stopPropagation()` in the menu trigger button. Doesn't this stop the event bubbling ? — Rafael Adel, Sep 04 '12 at 23:13
Maybe it's because you bound a `click` event to `taskWrapper` (which you prevent from bubbling up) but `html` got a `mousedown` handler attached (which is not prevented from bubbling). Try to bind events of the same type. — nuala, Sep 04 '12 at 23:13
@yoshi Oh, having the same event type solved it! Thanks a lot, maybe you can add it as an answer so i can accept it. — Rafael Adel, Sep 04 '12 at 23:17

score 1 · Accepted Answer · answered Sep 04 '12 at 23:23

The problem is in attaching event handlers of different types to the DOM elements:

$("#tasksWrapper").on("click", ...
...
$("html").on("mousedown", ...

Even though propagation of the click event is prevented a click will also fire mousedown event.

So instead of $("html").on("mousedown", ... better do $("html").on("click", ...

Hiding menu by clicking any where in the page

1 Answers1