divをトグルしてdivを閉じる、div内のすべてをクリックできるようにする

Question

divにトグルイベントがありますが、私については多くの質問がありましたが、それをやってみると、私のdivは数秒で消えるか、それともうまくいきません。ここに私のjsfiddleがあります。

<div>がクリックされたときに切り替える必要があるdivがあります。トグルされたdivには、入力が必要な入力があり、その内部にサブミットボタンもあります。だから、div内のクリックが許可されている必要がありますが、div内のみです。だから私はdivが表示されない限り、このdivの外側をクリックします。私がしました

$(window).click(function() { 
    $("ToggledDiv").hide(); 
}); 

を：動作しないのdivの外でクリックされたときに

$('#MyDiv').click(function (event) { 
    $("#ToggledDiv").slideToggle(); 
}); 

そして、それを非表示にするには、このコーディング：

私はこの素晴らしい切り替わりクエリを使用していますe.preventDefault（）でソリューションを試しました。それは動作しません、または$（ドキュメント）.click、mousedownでも、私はほしいと思う方法を流していない、それは数秒以内にそれを隠すか、またはトグルが働くことを妨げるので、失われた。

Answer 1

...私はe.targetはバニラNode.contains、ともない、ボタンを使用して、フォーム内にないことを確認することをここで見ることができますこの動作の背後にある理由は、HTML DOM APIのEvent Bubbling and Capturingです。

event.stopPropagation() OR event.cancelBubble = trueを使用すると、イベントがDOMツリーにバブリングして親ハンドラにイベントが通知されないようにすることができます。あなたはとても `$（ウィンドウ）.NOT（ '＃ToggleDiv'）のようなnot`` jqueryのを使用することができますevents order

$('#MyDiv').click(function(event) { 
 
    $("#ToggledDiv").show(); 
 

 
    disabledEventPropagation(event); 
 
    //console.log('2nd event'); 
 

 
}); 
 

 
$('#ToggledDiv').click(function(event) { 
 

 
    disabledEventPropagation(event); 
 
    //console.log('3rd event'); 
 

 
}); 
 

 

 
$(document).click(function() { 
 
    $("#ToggledDiv").hide(); 
 
    //console.log('1st event'); 
 

 
}); 
 

 

 
function disabledEventPropagation(event) { 
 
    if (event.stopPropagation) { 
 
    event.stopPropagation(); 
 
    } else if (window.event) { 
 
    window.event.cancelBubble = true; 
 
    } 
 
}

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

 
<div id="MyDiv" style="background-color:yellow"> 
 
    click me to open 
 
</div> 
 

 

 
<div id="ToggledDiv" style="display: none;background-color:yellow"> 
 
    <input type="text" /> 
 
    <input type="submit" /> 
 
</div>

Answer 2

#targetDivをクリックするとeventを見てください。実行するアクションを評価するために使用できるプロパティは、event.targetとevent.currentTargetの2つです。この場合：

$('#ToggledDiv').on('click', function(event) { 
    console.log(event.target, event.currentTarget); 
}); 

これは何をクリックすると、実際のターゲットまたはターゲット内の子要素であるかどうかを確認するための良い方法です。

Answer 3

クリスの答えに追加するには、

https://jsfiddle.net/jmLdp45s/3/

var $button = $('button'); 
var $form = $('form'); 

$button.click(function() { 
    $form.slideToggle(); 
}); 

$(window).click(function(event) { 
    if (
    !$form.get(0).contains(event.target) // target is not inside form 
    && event.target !== $button.get(0) // target is not button 
) $form.hide(); 
});