Question

这是我正在做的事情。

点击链接后，我正在显示一个框的 CSS

#toshow { display:none; }

HTML

<a href="#" id="mylink" >Link</a>
<div id="toshow">Here is my content</div>

Jquery的

$(document).ready(function() {
     $("#mylink").click(function() { 
         $("#toshow").show();
     });
});

现在我想要捕获一个事件，用户点击鼠标，如果用户点击的部分不是链接或分区，则分区应该再次隐藏。

怎么做？

Answer 1

$(document.body).click(function(e){
   var $box = $('#mylink');
   if(e.target.id !== 'mylink' && !$.contains($box[0], e.target))
      $("#toshow").hide();
});

您需要检查冒泡到document.body的点击事件。在该事件处理程序中，您查找event target id并将其与 NOT 要包含的元素以及所有已排除元素的子元素进行比较。

@Starx :(评论中的问题） $.contains()检查DOM node是否包含您指定的其他节点。所以

!$.contains($box[0], e.target)

表示if e.target does NOT contain the node $box[0]
见http://api.jquery.com/jQuery.contains/

Answer 2

首先，通过以编程方式隐藏内容而不是通过CSS隐藏内容，您应该对没有JavaScript的用户有点友善。您也可以使相同的链接隐藏内容。

$(document).ready(function() {
    $("#toshow").hide();

    $("#mylink").click(function() { 
        $("#toshow").toggle();
    });
});

如果您想按照“点击离开去焦点”的方式进行操作，那么您需要这样做。

$(document).ready( function() {
    $("#toshow").hide();

    $("#mylink").click( function() { 
        $("#toshow").show();
    });

    $("body").click( function () {
        $("#toshow").hide();
    });

    $("#toshow").click( function (e) {
        e.stopPropagation();
        return false;
    });
});

我们向#toshow添加点击处理程序的最后一点是为了在点击该元素时停止将click事件传播到文档正文。

Answer 3

将click even（或mousedown事件）绑定到文档对象：

$(document).bind('click', hideToShow());

Answer 4

您应该在文档对象上绑定click事件侦听器，并且每次触发事件时都必须检查事件目标元素（发起事件的DOM元素）。你可以这样做：


$(document).ready(function() {
     $(document).click(function(event) { 
         var $target = $(event.target);
         if (!$target.is('#mylink') && !$('#toshow').contains($target) && $('#toshow').is(':visible')) { // check if user clicled not on #mylink and outside of #toshow
             $("#toshow").hide();
         } else if ($target.is('#mylink') && !$('#toshow').is(':visible')) { // check if user clicked #mylink and #toshow is hidden
             $("#toshow").show();
         }
     });
});

Answer 5

$('input').on('blur', function() {
    //do something
});

您可以将您的元素ID设置为输入＆＃39;。

抓住鼠标单击事件外侧元素

5 个答案: