Selección de todos los elementos excepto para el div que no trabaja con jQuery

votos
1

Estoy tratando de seleccionar todos los elementos del documento, excepto para el #private_chat_menuelemento y adjuntar una función de disparo mouseup a ellos. Sin embargo, se ejecuta la función, independientemente de si hago clic en un cuadro de selección en el interior del #private_chat_menuelemento o no. Aquí está el código:

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

Publicado el 27/11/2018 a las 16:47
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
0

En primer lugar, utilizar la delegación evento a través .on(). Mucho más limpio y más fácil de mantener que los eventos a múltiples elementos de unión. Con la delegación, nos atamos el evento una vez (para un elemento de nivel superior, por ejemplo body) y luego, cuando se ejecuta, determinar si queremos que proceda para el elemento de destino que desencadenó el evento.

Podemos hacer esto pasando un selector como el segundo parámetro a on(), pero en su caso, ya que la lógica en cuanto a si el evento debe correr no es trivial, puede ser que sea más fácil para la prueba de esto en la devolución de llamada.

La clave está en excepto tanto #private_chat_menuy su childen / descendientes.

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

closest()dice: "¿el actual o cualquier padre / elementos antecesores coinciden con el selector pasado?" Si es así, sabemos que no debemos permitir que el evento se ejecute.

Respondida el 27/11/2018 a las 16:55
fuente por usuario

votos
0

Dada su requerimiento sería un mejor desempeño (y tienen la lógica más simple) Si ha conectado un solo controlador de eventos al documente interrogar al elemento que provocó el evento. Si era el #private_chat_menu, o un hijo de él, no trabajar. Algo como esto:

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();
  }
});
Respondida el 27/11/2018 a las 16:53
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more