时间戳

首页 > 解决方案 > 选择除 div 之外的所有元素不适用于 jQuery

jquery - 选择除 div 之外的所有元素不适用于 jQuery

问题描述

我正在尝试选择文档中除元素之外的所有元素#private_chat_menu并将 mouseup 触发功能附加到它们。但是，无论我是否单击#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/

标签： jqueryjquery-selectorsjquery-eventsmouseupjquery-trigger

解决方案

首先，通过 使用事件委托.on()。比将事件绑定到多个元素更清洁和更容易维护。使用委托，我们将事件绑定一次（到顶级元素，例如body），然后，当它运行时，确定我们是否希望它为触发事件的目标元素继续执行。

我们可以通过将选择器作为第二个参数传递给 来做到这一点on()，但在您的情况下，由于关于事件是否应该运行的逻辑并不简单，因此在回调中测试它可能更容易。

关键是除了#private_chat_menu和它的孩子/后代。

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

closest()说：“当前或任何父/祖先元素是否与传递的选择器匹配？” 如果是，我们知道我们不应该允许该事件运行。

推荐阅读