0

jquery イベントのバブリングに問題があります。メッセージボックスを開くボタンと閉じるボタンがあります。2つのボタンで簡単に開閉できます。#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 をクリックしても、何も実行されません。

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クリックした要素が または のいずれかであることを確認#overlayできます#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 に答える