CODEWITHSUNDEEP
jquery
Starx
Starx

Reputation: 78941

Catch a Mouse Click Event Out Side a Element

Here is what I am doing.

I am displaying a box, after click at a link CSS

#toshow { display:none; }

HTML

<a href="#" id="mylink" >Link</a>
<div id="toshow">Here is my content</div>

Jquery

$(document).ready(function() {
     $("#mylink").click(function() { 
         $("#toshow").show();
     });
});

Now I want to catch a event, where the user clicks the mouse, and if the portion the user is clicking is not either the link or the division, then the division should hide again.

How to do this?

Upvotes: 1

Views: 4064

Answers (5)

Ali Ahmadi
Ali Ahmadi

Reputation: 89

$('input').on('blur', function() {
    //do something
});

You can put your element Id instead of 'input'.

Upvotes: 0

jAndy
jAndy

Reputation: 235962

$(document.body).click(function(e){
   var $box = $('#mylink');
   if(e.target.id !== 'mylink' && !$.contains($box[0], e.target))
      $("#toshow").hide();
});

You need to check for click events which bubbled up to document.body. In that event handler you look for the event target id and compare it with the element you do NOT want to include, plus all elements which are children of that excluded element.

@Starx: (question in the comments) $.contains() checks if a DOM node contains anther node you specify. So

!$.contains($box[0], e.target)

means, if e.target does NOT contain the node $box[0]
see http://api.jquery.com/jQuery.contains/

Upvotes: 2

giolekva
giolekva

Reputation: 1178

You should bind click event listener on document object and every time event is triggered you must check the event target element (DOM element which initiated event). You can do it like this:


$(document).ready(function() {
     $(document).click(function(event) { 
         var $target = $(event.target);
         if (!$target.is('#mylink') && !$('#toshow').contains($target) && $('#toshow').is(':visible')) { // check if user clicled not on #mylink and outside of #toshow
             $("#toshow").hide();
         } else if ($target.is('#mylink') && !$('#toshow').is(':visible')) { // check if user clicked #mylink and #toshow is hidden
             $("#toshow").show();
         }
     });
});

Upvotes: 0

Fenton
Fenton

Reputation: 250812

Firstly, you should be a bit kinder to users who don't have JavaScript by hiding the content programatically, not via CSS. You could also just make the same link hide the content.

$(document).ready(function() {
    $("#toshow").hide();

    $("#mylink").click(function() { 
        $("#toshow").toggle();
    });
});

If you want to do it as you've suggested with "click away to de-focus" then you need to do this.

$(document).ready( function() {
    $("#toshow").hide();

    $("#mylink").click( function() { 
        $("#toshow").show();
    });

    $("body").click( function () {
        $("#toshow").hide();
    });

    $("#toshow").click( function (e) {
        e.stopPropagation();
        return false;
    });
});

The last bit, where we add a click handler to #toshow is intended to stop the propagation of the click event to the body of the document when you click on that element.

Upvotes: 1

Michael
Michael

Reputation: 20049

Bind the click even (or mousedown event) to the document object:

$(document).bind('click', hideToShow());

Upvotes: 0

Related Questions