如何在jquery中停止事件冒泡。

我使用twitter bootstrap创建背景模式。当我点击背景模态应该隐藏哪个工作正常。但是当我点击om模式时，它会自动消失，这应该不会发生。请帮忙。如何在jquery中停止事件冒泡。

//when button is clicked open modal 
       $(".modals").click(function(){ 
        //.abovepage should appear 
        $(".abovepage").show(); 
        $(".pagecontent").show('slow'); 
       }); 
// When backdrop is clicked close modal 
       $(".abovepage").click(function(){ 
        $(this).hide(); 
       });

HTML

<body id="wholepage"> 
     <div id="maincontent"> 
      <div id="innercontent"> 
       <button class="modals" data-id="large"><a href="#">Large Modal</a></button> 
       <button class="modals" data-id="small"><a href="#">Small Modal</a></button> 

      </div> 
     </div> 
     <div class="abovepage"> 
      <div class="pagecontent large"> 
       <div class="element" data-clicked="no"> 
        <div class="upper"> 
         <div class="uppercontent"data="modal" > 
          Large Modal 

         <span id="closebutton"><a href="#">x</a></span> 
         </div> 
        </div> 
        <div class="lower"> 
         <div class="lowercontent"> 
         ... 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
</body>

来源

2014-10-11 SNEHI CHANCHAL

这是happend因为modal是叠加的子元素，并且隐藏它在点击父元素（.abovepage），所以它隐藏模态也。一种解决方案是这样的：

$(document).ready(function() { 
 
    //when .modals is clicked 
 
    $(".modals").click(function() { 
 
     //.abovepage should appear 
 
     $(".abovepage").show(); 
 
     $(".pagecontent").show('slow'); 
 
    }); 
 
    $(".abovepage").click(function() { 
 
     $(".pagecontent").hide(); 
 
     $(this).hide(); 
 
    }); 
 
});

#maincontent { 
 
    height:60px; 
 
} 
 
#innercontent { 
 
    height:40px; 
 
    margin:10px; 
 
} 
 
.modals { 
 
    height:40px; 
 
    background-color: #6596EE; 
 
    border:solid 1px #3B7EF7; 
 
    border-radius: 3px; 
 
} 
 
.modals a { 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    font:16px arial; 
 
    color: white; 
 
} 
 
.modals:hover { 
 
    background: #122A55; 
 
} 
 
.abovepage { 
 
    position:fixed; 
 
    left:0; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    background-color: #3D3C3C; 
 
    opacity: 0.6; 
 
    display:none; 
 
} 
 
.pagecontent { 
 
    height:100px; 
 
    margin-top: 52px; 
 
    margin-bottom: 30px; 
 
    display:none; 
 
} 
 
.large { 
 
    width:900px; 
 
    margin-left: 230px; 
 
    margin-right: 222px; 
 
} 
 
.small { 
 
    width:250px; 
 
    margin-left: 511px; 
 
    border-radius: 3px; 
 
} 
 
.element { 
 
    height:100px; 
 
    background-color: white; 
 
    box-shadow:3px 3px 8px 3px #030303; 
 
    position:relative; 
 
    top:0px; 
 
    left:0px; 
 
    border:solid 1px #1D1B1B; 
 
    border-radius: 5px; 
 
} 
 
.upper { 
 
    height:50px; 
 
    border-bottom: solid 1px #D3C8C8; 
 
} 
 
.lower { 
 
    height:50px; 
 
} 
 
.uppercontent { 
 
    height:25px; 
 
    padding-top: 15px; 
 
    padding-left: 14px; 
 
    padding-right: 9px; 
 
    font-weight:bold; 
 
    font:18px arial; 
 
} 
 
.lowercontent { 
 
    height:25px; 
 
    padding-top: 15px; 
 
    padding-left: 14px; 
 
} 
 
#closebutton { 
 
    float:right; 
 
} 
 
#closebutton a { 
 
    text-decoration:none; 
 
    color:#C4BBBB; 
 
    font-weight: bold; 
 
    font-size:18px; 
 
} 
 
#closebutton a:hover { 
 
    color:#333232; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body id="wholepage"> 
 
    <div id="maincontent"> 
 
     <div id="innercontent"> 
 
      <button class="modals" data-id="large"><a href="#">Large Modal</a> 
 
      </button> 
 
      <button class="modals" data-id="small"><a href="#">Small Modal</a> 
 
      </button> 
 
     </div> 
 
    </div> 
 
    <div class="abovepage"></div> <!-- here close div --> 
 
     <div class="pagecontent large"> 
 
      <div class="element" data-clicked="no"> 
 
       <div class="upper"> 
 
        <div class="uppercontent" data="modal">Large Modal \t <span id="closebutton"><a href="#">x</a></span> 
 

 
        </div> 
 
       </div> 
 
       <div class="lower"> 
 
        <div class="lowercontent">...</div> 
 
       </div> 
 
      </div> 
 
     </div>

从覆盖（abovepage）取下模态的内容。

来源

2014-10-11 10:33:32

jQuery的电话是你的点击与event参数，在其中您可以调用它的stopPropagation方法，以防止它 “冒泡” 了DOM树的事情。

$(".pagecontent").click(function(event){ 
    event.stopPropagation(); 
});

来源

2014-10-11 10:26:32 Winestone

问题发生时隐藏不显示时 – 2014-10-11 10:27:48

@SNEHICHANCHAL对不起，不太明白的问题。这是你想要的吗？ – Winestone 2014-10-11 10:28:49

打开jsfiddle链接，点击大模式按钮。然后点击Modal内的任何地方。它不应该隐藏。 – 2014-10-11 10:30:18

如何在jquery中停止事件冒泡。

回答

相关问题