Question

如果我在里面点击它，我试图保持当前div可见。我想隐藏div只有当我点击页面上的任何地方但是当前的div。

我已经尝试了e.stopPropagation();，但这会破坏我在函数内部的其他点击处理程序。

var filterContainer = $(".js-filter-container");
var pageDocument = $(document);

$(document).on('click', '.js-show-filter', function(e) {
    e.preventDefault();

    var currentFilter = $(this).next(filterContainer);
    currentFilter.toggle().css("z-index", 99);
    filterContainer.not(currentFilter).hide();

    pageDocument.click(function(){
        filterContainer.hide();
    });

    return false;
});

Answer 1

如果您不想更改事件传播，可以通过从event.target（即$(e.target).closest()）向上遍历来检查点击是否在元素内。（只检查事件目标本身不适用于子元素。）此处显示的示例绑定到特定元素而不是委托文档事件，但它将完全相同：

$('.catch').click(function(e) {
  if ($(e.target).closest('.prevent').length) {
    // The click was somewhere inside .prevent, so do nothing
  } else {
    alert("Hide the element");
  }
});

.prevent {
  border: 1px solid
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="catch">
  Clicks here should fire the event.
  <div class="prevent">
    Clicks here should not fire the event.
    <div class="whatever">Neither should <b>clicks</b> on <i>child nodes</i>.</div>
    And not here.
  </div>
  But here, yes.
</div>

Answer 2

有两种方式：最简单的方法是：当点击div时，调用e.stopPropagation（），并复制你想要的所有点击处理程序（不是正确的方式，因为你复制代码......）

或者在你的onclick函数上，获取光标位置，只有当它不在div中时才关闭div：

pageDocument.click(function(e)
{
    //we get element position
    var startX = $(filterContainer).offset().left;  
    var startY = $(filterContainer).offset().top;

    var endX   = startX + $(filterContainer).outerWidth();
    var endY   = startY + $(filterContainer).outerHeight();

    //mouse pose relative to page (not window)
    var mouseX  = e.pageX;
    var mouseY  = e.pageY;


    if (!((mouseX > startX || mouseX < endX) && (mouseY > startY || mouseY < endY))) filterContainer.hide(); //if not on the container: remove it
});

Answer 3

您可以尝试这种方法

$(document).on('click', '.js-show-filter', function(e) {
    $('.currentFilter').removeClass('currentFilter');
    var currentFilter = $(this).next('.js-filter-container');
    $('.js-filter-container:visible').hide();
    currentFilter.addClass('currentFilter');
    currentFilter.slideDown(500);
});

$('body').on('click', ':not(.currentFilter)', function(){
    $('.currentFilter').removeClass('currentFilter');
    $('.js-filter-container:visible').hide();
});

Fiddle here

查看W3Schools How to有关手风琴的信息

Answer 4

我最终使用这个解决方案：

$(document).mouseup(function (e) {
    if (!filterContainer.is(e.target) && filterContainer.has(e.target).length === 0) {
       filterContainer.hide();
    }
});

jsFiddle

jQuery - 如果我在里面点击它，不要隐藏div

4 个答案: