JQuery - このような状況でevent.targetが動作しないのはなぜですか？

Question

ちょうど私がコンテナの内部をクリックすると、それがクリックで表示されないようにifステートメントにもかかわらず警告ポップアップが表示されるのだろうかと疑問に思う。

また、どのように子供の内部をテストするのですか？

https://jsfiddle.net/w8fd3m67/

$(window).on("click", function(event) { 
 
    var container = $("#container"); 
 
    if ((event.target) !== container) { 
 
    alert("clicked outside"); 
 
    } 
 
});

body { 
 
    height: 600px; 
 
} 
 

 
#container { 
 
    padding: 2rem; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

乾杯

Answer 1

あなたは共同し.is()機能を使用し.is()

if($(event.target).is(container)) 

Answer 2

を使用する必要がありますお使いのjQueryの要素にイベントターゲットをmpare：

$(window).on("click", function(event) { 
 
    var container = $("#container"); 
 
    if ($(event.target).is(container)) { 
 
    alert("clicked outside"); 
 
    } 
 
});

body { 
 
    height: 600px; 
 
} 
 

 
#container { 
 
    padding: 2rem; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

Answer 3

はid比較。ここで$("#container") jQueryオブジェクトは、あなたが一致しませんjQueryオブジェクトにDOM要素を比較している

$(window).on("click", function(event) { 
 
    if ((event.target.id) !== 'container') { 
 
    alert("clicked outside"); 
 
    } 
 
});

body { 
 
    height: 600px; 
 
} 
 

 
#container { 
 
    padding: 2rem; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

Answer 4

です。ターゲットからjQueryオブジェクトを作成し、それが#containerの子孫であるかどうかを確認します。これは、子要素が#container以下の場合にも機能します。

Updated fiddle

$(window).on("click", function(event) { 
    if ($(event.target).closest('#container').length == 0){ 
    alert("clicked outside"); 
    } 
}); 

Answer 5

この試してください：あなたがここにjQueryオブジェクトにDOM要素の参照（event.target）を比較しているので

​​