2

これは私のコードです：

HTML：

<div id="container">
    <div id="box">
        Content
    </div>
</div>​

CSS：

#container
{
    position:relative;
    width:400px;
    height:400px;
    background-color:red;
}

#box
{
    position:absolute;
    width:200px;
    height:200px;
    top:100px;
    left:100px;
    background-color:blue;
}
​

jQuery：

$('#container:not(#box)').click(function (e) {
    e.preventDefault();
    $('#container').fadeOut(300);
});​

fadeOut親（赤いdiv）をクリックするだけです。青いもの（子）をクリックしても何も起こりません。jQueryでこれを行うにはどうすればよいですか？試してみまし:notたが、これは正しい解決策ではないようです...

4

3 に答える 3

6

e.targetイベントが（ ）から発生した要素が（）である#containerかどうかを確認するために必要なのは次のthisとおりです。

$('#container').click(function (e) {
    if (e.target === this) {
        $('#container').fadeOut(300);
    }
});​
于 2012-06-20T09:37:39.690 に答える
3

をクリックすると#box、イベントがバブルアップするため、イベントclickは親要素にも登録されます。#container

それを防ぐには2つの方法があります。

まず、泡立ちを止めることです。e.stopPropagation()これを行うには、#boxクリックハンドラーを呼び出します。ただし、もちろん、#boxイベントハンドラーがないため、次のハンドラーの方が魅力的です。

2つ目は、イベントハンドラーから、実際の子または一部の子を#containerクリックしているかどうか、およびイベントがバブルしたかどうかを確認することです。これを行うには、要素#containerを調べて、それをイベントハンドラーで比較します。e.targetthis#container

于 2012-06-20T09:38:39.773 に答える
0 
$('#container').click(function () {
    $('#container').fadeOut(300);
});

$('#box').click(function (e) {
    e.stopPropagation()
});
于 2012-06-20T09:45:23.167 に答える