Выбор всех элементов, кроме div, не работающего с jQuery - PullRequest
Новая
       36

Выбор всех элементов, кроме div, не работающего с jQuery

0 голосов
/ 27 ноября 2018

Я пытаюсь выделить все элементы в документе, кроме элемента #private_chat_menu, и прикрепить к ним функцию запуска мыши.Тем не менее, он запускает функцию независимо от того, нажимаю ли я на поле выбора внутри элемента #private_chat_menu или нет.Вот код: 

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

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Во-первых, используйте делегирование события через .on().Гораздо чище и проще в обслуживании, чем привязка событий к нескольким элементам.При делегировании мы связываем событие один раз (с элементом верхнего уровня, например, body), а затем, когда оно выполняется, выясняем, хотим ли мы, чтобы оно продолжалось для целевого элемента, который вызвал событие.

Мыэто можно сделать, передав селектор в качестве второго параметра в on(), но в вашем случае, поскольку логика относительно того, должно ли событие выполняться, нетривиальна, может быть проще проверить это в обратном вызове.

Ключом является исключение #private_chat_menu И его потомков / потомков. 

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

closest() говорит: "текущий или любые родительские / родительские элементы соответствуют переданному селектору?"Если да, мы знаем, что не должны позволять запускать событие.

0 голосов
/ 27 ноября 2018

Учитывая ваше требование, он будет работать лучше (и будет иметь более простую логику), если вы подключите один обработчик события к document и запросите элемент, вызвавший событие.Если это был #private_chat_menu или его ребенок, не работайте.Как то так: 

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();
  }
});
...