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

Posted 2023-05-09

【中文标题】选择除 div 之外的所有元素不适用于 jQuery

【英文标题】：Selecting all elements except for div not working with jQuery

【发布时间】：2019-04-29 11:20:07

【问题描述】：

我正在尝试选择文档中除 #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/

【参考方案1】：

根据您的要求，如果您将单个事件处理程序附加到 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();
  
);

【讨论】：

当我点击里面的选择框时，这仍然隐藏了#private_chat_menu。

您能否编辑问题以显示问题的工作示例

对不起，我的错。还有一个额外的)。我已经为你更新了答案。这也是一个工作示例：jsfiddle.net/RoryMcCrossan/o5w1pbjz

【参考方案2】：

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

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

关键是要同时排除#private_chat_menu 及其子/后代。

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

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

【讨论】：

当我点击里面的选择框时，这仍然隐藏了#private_chat_menu。