回答:
私が理解している場合、div以外の場所をクリックしたときにdivを非表示にする必要があります。divの上でクリックした場合、divは閉じないはずです。あなたはこのコードでそれを行うことができます：
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
これにより、クリックがページ全体にバインドされますが、問題のdivをクリックすると、クリックイベントがキャンセルされます。
.myDiv。たとえば、内部に選択ドロップダウンがある場合.myDiv。選択をクリックすると、ボックスの外側をクリックすると考えられます。
これを試して
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
asp.netでは.netがidに接続する余分なものを心配する必要があるため、私はIDではなくクラス名を使用しています。
編集- 別のピースを追加したので、次のように機能します。
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
jQuery 1.7以降、イベントを処理する新しい方法があります。これを「新しい」方法で実行する方法を示すために、ここで答えようと思いました。まだの場合は、jQueryのドキュメントで「on」メソッドを読むことをお勧めします。
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
ここでは、jQueryのセレクターとイベントのバブリングを悪用しています。後でイベントハンドラを確実にクリーンアップすることに注意してください。$('.container').one（docsを参照）を使用してこの動作を自動化できますが、ここでは適用できないハンドラー内で条件を実行する必要があるためです。
次のコード例は、私にとって最もうまくいくようです。'return false'を使用して、divまたはその子のいずれかのイベントのすべての処理を停止できます。ポップアップdivのコントロール（たとえば、ポップアップログインフォーム）が必要な場合は、event.stopPropogation（）を使用する必要があります。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
ありがとう、トーマス。私はJSを初めて使い、自分の問題の解決策を探していました。あなたが助けました。
私はjqueryを使用して、下にスライドするログインボックスを作成しました。最高のユーザーエクスペリエンスを実現するために、ユーザーがボックス以外の場所をクリックしたときにボックスが非表示になるようにしました。私はこれを修正するのに約4時間を費やすことに少し恥ずかしいです。でもねえ、私はJSは初めてです。
多分私のコードは誰かを助けることができます：
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
あなたもできることは：
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
ターゲットがdivではない場合、長さがゼロに等しいことを確認してdivを非表示にします。
以下を行いました。他の誰かが利益を得られるように共有することの考え。
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
これについて誰かを助けることができるかどうか知らせてください。
div#newButtonDivクリックしないと実行されません。.click()4行目の2番目を削除することをお勧めします（これを行う場合は、右中括弧、括弧、セミコロンを削除してください-9行目）。
これを試して：
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
}); $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});ここで#suggest_input inはテキストボックスの名前で、.suggest_containerはulクラス名で、.suggest_divは私の自動提案の主要なdiv要素です。
このコードは、画面の任意の場所をクリックしてdiv要素を非表示にするためのものです。すべてを行う前に、コードを理解してコピーしてください...
これを試してください、それは私にとって完璧に機能しています。
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});ただし、これらのことも覚えておく必要があります。http://css-tricks.com/dangers-stopping-event-propagation/
以下は、Sandeep Palの回答に基づいた実際のCSS /小さなJSソリューションです。
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});チェックボックスをクリックしてから、メニューの外で試してください。
これは機能しません。.myDIVの内側をクリックすると、.myDIVが非表示になります。
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>上記の提案に対するわずか2つの小さな改善：
クリックを想定して、これをトリガーしたイベントの伝播を停止します
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>$( "element" ).focusout(function() {
//your code on element
})$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});