How to exclude more div id's from clicking event

Question

I am new to jquery, and i like to know if there is a way to exclude multiple div's from clicking event. First, i was looking how to hide certain div, when mouse clicks outside of it. This is only solution that gave some result (:not selector didn't work). I would like to exclude #cartbasket div as well, so that same button can continue to toggle up and down #cartbasketList ul below. I tried many combinations, but without any good..

html:

<div id="cartinfos">
  <div id="cartbasket"></div>
    <ul id="cartbasketList">
      <li><a href="#">somelink</a></li>
      <li><a href="#">somelink</a></li>
      <li><a href="#">somelink</a></li>
    </ul>
 </div>

CSS:

#cartinfos {
    position: relative;
    display: inline-block;
    text-align: right;
    width: 50%;
    left: 10px;
    padding: 15px 0px;
}

#cartbasket {
    position: relative;
    display: inline-block;
    background: #ff0000;
    width: 40px;
    height: 40px;
}

#cartbasketList {
   position: absolute;
   display: none;
   border-top: 5px solid #ff0000;
   width: 250px;
   height: 400px;
   top: 60px;
   right: 0px;
   background:#fff;
   z-index: 999999;
}

jquery:

  $(function() {

      $("#cartbasket").click(function() {
         $("#cartbasketList").slideToggle("fast");
    });


      $("body").mouseup(function(event) {
        if (event.target.id != 'cartbasketList') {
            $("#cartbasketList").slideUp(100);
        }

    });


    });

Wouldn't it be easier to target the elements you want, instead of starting with all the element (they all bubble to body) and then excluding ? — adeneo, Jun 19 '14 at 21:57
`$("body").mouseup()` is called for *every single element on the page*. That is really extreme, and under normal circumstances is unusable. Since you haven't described *what* you want to happen, it's extremely difficult to correct the the problem. — Erik Philips, Jun 19 '14 at 22:14

score 1 · Accepted Answer · answered Jun 19 '14 at 22:19

1

You should track what your click event and check to see if a certain element has been clicked.

Be sure to only use 1 click event otherwise the events will start to bubble and give you an undesirable affect.

$(function() {

    var $cartList = $('#cartbasketList');

    $(document).on('click', function(e) {
        var target = e.target.id;

        if(target == "cartbasket"){
            $cartList.slideToggle('fast');
        }
        else {
            $cartList.slideUp('fast');
        }
    });

});

Demo Fiddle

answered Jun 19 '14 at 22:19

Adjit

10,134
12
53
98

Thanks for quick response Adjit, this is working well. I'll keep your advice in mind. – gundra Jun 19 '14 at 22:30
@gundra glad to hear it. If this is working you should mark it as correct. But also, my advice with regards to 1 click event... I meant 1 click event for THIS. You can delegate other elements to click events, they just wont pass your conditional – Adjit Jun 19 '14 at 22:37
Sorry Adjit , this is my first post here :) . I did a bit of modification, on code that you just have sent to me. I add *** else if (target == "cartbasketList") { $cartList.stop();*** So now #cartbasketList don't disappear when click on it. That was what i wanted on first place. I learned something today, thank you very much !!! – gundra Jun 19 '14 at 23:01
@gundra very cool! also, if you want the animation to reset when you call `.stop()` call `.stop(true, true)` – Adjit Jun 20 '14 at 13:55

How to exclude more div id's from clicking event

1 Answers1

Demo Fiddle