Selecting all elements except for div not working with jQuery

Question

I'm trying to select all elements in the document except for the #private_chat_menu element and attach a mouseup trigger function to them. However, it runs the function regardless of whether I click a select box inside the #private_chat_menu element or not. Here is the code:

<script>
$("*:not(#private_chat_menu > *)", "body").mouseup(function(e)
{
    var chat_user_container = $('#private_chat_menu');
    var chat_container = $('#chat-wrapper');

    if (chat_container.css("visibility") == 'visible' && chat_user_container.is(':visible'))
    {
        chat_user_container.hide();
    }
});
</script>

<div id="chat-wrapper">
   <div id="private_chat_menu">
      <select id="chat_user_select" name="chat_user_select">
         <option value="">Select Assigned User</option>
         <option value="1">...</option>
         <option value="2">...</option>
      </select>
   </div>
</div>

JSFiddle: http://jsfiddle.net/q0ky2f56/

Rory McCrossan · Accepted Answer · 2018-11-27T17:11:04.427

1

Given your requirement it would perform better (and have simpler logic) if you attached a single event handler to the document and interrogate the element which raised the event. If it was the #private_chat_menu, or a child of it, do no work. Something like this:

var $chat_user_container = $('#private_chat_menu');
var $chat_container = $('#chat-wrapper');

$(document).on('mouseup', function(e) {
  var $target = $(e.target);
  if ($target.is($chat_user_container) || $target.closest($chat_user_container).length)
    return;

  if ($chat_container.is(':visible') && $chat_user_container.is(':visible')) {
    $chat_user_container.hide();
  }
});

edited Nov 27 '18 at 17:11

answered Nov 27 '18 at 16:53

Rory McCrossan

331,213
40
305
339

This still hides the `#private_chat_menu` when I click on the select box inside it. – Daniel Harris Nov 27 '18 at 17:04
Can you please edit the question to show a working example of the problem – Rory McCrossan Nov 27 '18 at 17:04
1

Sorry, my bad. There was an extra `)`. I've updated the answer for you. Here's a working example too: http://jsfiddle.net/RoryMcCrossan/o5w1pbjz/ – Rory McCrossan Nov 27 '18 at 17:11

score 0 · Answer 2 · answered Nov 27 '18 at 16:55

Firstly, use event delegation via .on(). Far cleaner and easier to maintain than binding events to multiple elements. With delegation, we bind the event once (to a top-level element e.g. body) and then, when it runs, ascertain whether we want it to proceed for the target element that triggered the event.

We can do this by passing a selector as the second param to on(), but in your case, since the logic as to whether the event should run is non-trivial, it might be easier to test for this in the callback.

The key is to except both #private_chat_menu AND its childen/descendents.

$('body').on('mouseup', '*', function(e) {
    if ($(this).closest('#private_chat_menu').length) return;
    //safe to continue...
});

closest() says: "does the current or any parent/ancestor elements match the passed selector?" If yes, we know we shouldn't allow the event to run.

This still hides the `#private_chat_menu` when I click on the select box inside it. — Daniel Harris, Nov 27 '18 at 17:03

Selecting all elements except for div not working with jQuery

2 Answers2