Question

我尝试在点击按钮时创建叠加层，然后在用户点击叠加层外部时将其删除。在我的例子中，当点击叠加时，目标返回长度“0”，我无法弄清楚为什么当这个方法与我用过的其他例子一起工作时。有什么想法吗？

这是js

$(document).ready(function() {
    $(document).on("click",".pop", function() {
       if ($('#search-overlay').length === 0) {
           $('body').append('<div id="search-overlay"></div>');
        }
    });
    $(document).on("mouseup", function(e) {
      var container = $("#search-overlay");
      if (container.has(e.target).length === 0) {
        alert(container.has(e.target).length);
        container.remove();
      }
    });
});

您在行动http://jsfiddle.net/CwrAh/

中看到的链接

Answer 1

那是因为.has()寻找后代，它与jQuery对象内部的元素不匹配。一个额外的检查来修复你的逻辑：

if (!container.has(e.target).length && !container.is(e.target)) {

Fiddle

当涉及性能时，可以使用e.target元素与container jQuery对象中包含的第一个元素之间的简单比较来替换is()函数：

 if (!container.has(e.target).length && container[0] !== e.target) {

Fiddle #1.1

您还可以使用.closest()进一步简化它：

if (!$(e.target).closest(container).length) {

Fiddle #2

相同的逻辑，但相反。 closest开始尝试匹配jQuery对象中包含的元素，并遍历DOM树，寻找匹配的祖先叠加层。与第一个版本的结果相同。

第三种变体，放弃了逻辑测试的需要。附加一个停止事件传播的鼠标处理程序到覆盖图，因此它不会到达document：

$('body').append($('<div>', {
    id: 'search-overlay',
    mouseup: function(e) {
        e.stopPropagation();
   }
}));

Fiddle #3

使用mouseup函数将目标显示为0

1 个答案: