Question

我遇到了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时，我想关闭消息框div，而不是#message div。当我点击#message div时，它不应该做任何事情。

Answer 1

它的事件不是它的嵌套。您的邮件嵌套在叠加层中，这意味着对邮件的任何点击也是对叠加层的点击。

试试这个：

<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/

这样当你点击它没有关闭的消息时。

Answer 2

您可以查看e.target.id以确保点击的元素是#overlay或#close：

// close message box
body.on('click', '#close, #overlay', function(e){
    if(e.target.id === 'overlay' || e.target.id === 'close') {
        $('#overlay, #message').hide();
    }            
});

Answer 3

使用它：

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

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

如何在jQuery 1.8中停止事件冒泡？

3 个答案: