Question

我需要jQuery灯箱的确切功能。在我的循环项目中，我为每个项目都有一个隐藏元素。当访问者点击元素时，他/她将看到隐藏的元素。然后，当访问者在元素（新）之外单击时，该元素将再次隐藏。但是，元素有一个锚标记。因此，如果访问者点击该元素，他/她可以转到该链接。我必须找出如何选择元素之外的区域。

我在这里给出一个简单的HTML。

<div style="width:500px; height: 500px; background: #000;" id="one">            

</div>
<div rel="maisha" style="width:500px; height: 500px; background: #ff0; display: none;" id="two">            
    <a href="http://www.webdeveloperszone.com"> WDZ </a>
</div>

使用Javascript：

<script>        
    $("#one").click(function(){
       $("#one").hide();
       $("#two").show();               
    });            
</script>

现在我需要我可以实施的代码：＆＃34;当访问者在id="two"之外点击时，它会再次显示div id="one"，div id="two"将隐藏。但是，如果他/她点击div id="two"内部，它还有其他功能。

Answer 1

好像您正在寻找event.stopPropagation();

只需将点击处理程序添加到点击#two应隐藏的元素（例如正文）：

    $("body").click(function(){
       $("#one").show();
       $("#two").hide();               
    });

并为#two添加事件处理程序：

    $("#two").click(function(e){
       //do something
       e.stopPropagation();             
    });

如果点击#two，通常会调用bodys点击处理程序（如果有的话），但e.stopPropagation();会阻止此行为。

Answer 2

通过以下技术，您可以定义文档中的元素，这些元素在单击时不应触发关闭/隐藏。

首先定义单击文档中任何位置时应隐藏的元素（或任何操作）。

$('body').on('click', function() {
  // Hide elements here
  $('.elements').hide();
});

要防止您的元素在其中单击时隐藏，您应该使用event.stopPropagation()

$('.elements').on('click', function(e) {
  // This will stop the event from "bubbling" the click event up the DOM to the body
  e.stopPropagation();
});

Answer 3

当您单击#one时，您可以为文档指定一个隐藏#two并再次显示#one的单击事件。您还可以将单击事件分配给#two，以阻止Click事件传播。 event.stopPropagation（）将阻止文档单击事件的发生。此外，一旦触发文档单击事件，您可以将其关闭，以便在再次单击文档时不会一直触发。

以下是一个示例：http://jsfiddle.net/6fg5Y/1/

$(document).ready(function(){
    $("#two").click(function(e){
        e.stopPropagation();
    });

    $("#one").click(function(e){
        e.stopPropagation();
        $(this).hide();
        $("#two").show();

        $(document).on("click", function(e){
            $("#one").show();
            $("#two").hide();
            $(document).off("click");
        });
    });
});

那个

的html

<a href="javascript:void(0);" id="one">
    Div One
</a>
<div id="two">
    Div Two
</div>

和css

#two {
    display: none;
    width: 100px;
    height: 100px;
    background-color: #AAA;
    position: absolute;
    top: 50px;
    left: 50px;
}

如何使用jquery在元素外部选择body

3 个答案: