pop_upがクリックされたとき（divの内容をクリックするのとは対照的に）にウィンドウを閉じたい。例えば。背景レイヤーをクリックするとdivが非表示になります。下のコードでは、 "pop_up"のみのdivコンテンツボットをクリックしたときに閉じるようにしません。#pop_up親のクリックでJqueryを閉じる
どうすればいいですか？
$("#pop_up").click(function() {
$("#pop_up").hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pop_up">
<div id="pop_up_content">
<h1> world </h1>
</div>
</div>あなたがクリックのevent引数を使用し、クリックが別の要素内にあるかどうかを確認することができます（または、それは要素そのものである）
JSFiddle：https://jsfiddle.net/32mz2x3x/1/
$("#pop_up").click(function(event) {
if ($(event.target).parents().andSelf().is('#pop_up_content')) {
return
}
$("#pop_up").hide();
});
私はparentsにを使用していました
pop_up_content要素の内部にあるかどうかを確認し、多分あなたは
#pop_up_contentをクリックするので、私は
andSelfを使用
さらに詳しい情報：
これは以前のようなことをしようとしていました。私は失敗しました！ありがとう！高く評価！ –
:not()と組み合わせたフィルタ選択を可能にする形式、使用：あなたが経験している何
$("#pop_up").on('click', ':not(#pop_up_content)', function (e) {
$("#pop_up").hide();
});
の場合何らかの理由で、私のためにその逆の作業をしています。もしpop_up_contentをクリックしてpop_upを閉じると、pop_upをクリックすると何もしません。 –
を泡立ちで、イベントの振る舞いを取り込みます。 この回答を確認してくださいWhat is event bubbling and capturing?。
シンプルなアプローチは、子供にonClickを付けてバブリングを止めることです。
$("#pop_up_content").click(function(ev) {
ev.preventDefault()
ev.stopImmediatePropagation() // best to use to stop other event listeners from being called
});
JSBin: http://jsbin.com/hoyizos/edit?html,css,js,output
$("#pop_up").click(function(e) {
if ($(event.target).is($("#pop_up"))){
$("#pop_up").hide();
}
});h1{
margin:50px 50px;
background-color:red;
display:inline;
}
#pop_up_content{
background-color:yellow;
}
#pop_up{
margin:10px;
background-color:green;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
<div id="pop_up">
<div id="pop_up_content">pop_up_content
<h1> world </h1>
</div>
I am the pop_up!
</div>
</body>
</html>他の方法がない場合にのみ
がそれを使用する、The Dangers of Stopping Event Propagation！：イベントバブルをキャンセルしないでください。
jQuery 3.xを使用する場合は、andSelf()を使用しないでください。because it is deprecated since v1.8 and will be removed in jQuery v3。
注：この機能は廃止し、現在のjQuery 1.8以降で使用されるべきである .addBack（）の別名であるれています。
jQuery 1.8 <を使用する場合は、代わりにaddBackを使用してください。
あなたはこの記事を参照することができます。http://stackoverflow.com/questions/2728252/ jquery-stoppropagation-bubble-down –