0

我遇到了 jquery 事件冒泡的问题。我有一个按钮，它打开一个消息框并有一个按钮，关闭它。用这两个按钮打开和关闭很容易。当我尝试通过单击#overlay div 来关闭消息框时会出现问题。

这是我的代码： HTML：

<div id="wrapper">
<button id="open">Open</button>
<div id="overlay">
    <div id="message">
        <p>Some error message</p>
        <button id="close">Close</button>    
    </div>
</div>
</div>​

CSS：

#wrapper {
    background:#ccc;
    height:500px;
    position:relative;
}

#overlay {
    background: rgba(0, 0, 0, 0.6);
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    display:none;
}

#message {
    background:#fff;
    border-radius:5px;
    padding:20px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-110px;
    margin-top:-100px;
    width:200px;
    text-align:center;
    display:none;
}

#close {
    color:#fff;
    background:red;
    cursor:pointer;
    border:0;
    border-radius:4px;
    padding:5px 8px;
}

​Javascript/jQuery：

$(function() {

    // cache the body tag
    var body = $('body');

    // open message box
    body.on('click', '#open', function(e){
       $('#overlay, #message').show();         
    });

    // close message box
    body.on('click', '#close, #overlay', function(e){
       $('#overlay, #message').hide();   
       e.stopPropagation();                     
    });            

});​

这是一个演示：http: //jsfiddle.net/vnj6X/

我试图添加

// do not close message box
body.on('click', '#message', function(e){
    return false;       
});

但在其他情况下，我有一个登录表单，当我单击提交按钮时，它不会将表单数据发送到服务器。

谁能帮助我如何停止事件冒泡？

当我点击#overlay div而不是#message div时，我想关闭消息框div。当我单击#message div 时，它不应该做任何事情。

4

3 回答 3

3

它不是事件冒泡它的嵌套。您的消息嵌套在叠加层内，这意味着对消息的任何点击也是对叠加层的点击。

尝试这个：

<div id="wrapper">
    <button id="open">Open</button>
    <div id="overlay">
    </div>
    <div id="message">
        <p>Some error message</p>
        <button id="close">Close</button>    
    </div>
</div>​

这是小提琴：http: //jsfiddle.net/Vq5Nq/

这样，当您单击该消息时，它不会关闭。

于 2012-09-05T12:58:08.123 回答
2

您可以检查e.target.id以确保单击的元素是#overlayor #close：

// close message box
body.on('click', '#close, #overlay', function(e){
    if(e.target.id === 'overlay' || e.target.id === 'close') {
        $('#overlay, #message').hide();
    }            
});
于 2012-09-05T12:59:08.840 回答
0

用这个：

// close message box
$('#close').click(function(e){
   $('#overlay, #message').hide();         
});

而不是您的关闭消息框代码。

于 2012-09-05T12:58:44.543 回答