javascript - jQueryクリックオフ要素イベント

Question

表示されるフローティングdivがあり、ユーザーがdivをクリックしたときに非表示にしたいと思います。これは、要素をホバーオフするときの.hover（）関数のコールバックに似ています。私だけがクリックのためにこれをしたいです。

ボディにクリックイベントを設定して、divを非表示にしてみましたが、予期しない結果になりました。

誰かが私がこれを簡単に行うことができる方法についてのアイデアを持っていますか？

score 86 · Accepted Answer

ページ内の別の場所をクリックしたときにdivをクリアしたい場合は、次のようにすることができます。

$('body').click(function(event) {
    if (!$(event.target).closest('#myDiv').length) {
        $('#myDiv').hide();
    };
});

score 19 · Accepted Answer

もう1つの、おそらくより単純なオプションは、フローティングDIVとページの残りの部分の間に透明なdivを追加することです。

透過DIVでの単純なクリックイベントで非表示を処理でき、クリックイベントで発生する問題を回避できます。

score 11 · Accepted Answer

Jqueryを使用している場合は、次のようなセレクターを使用できます。

$("*:not(#myDiv)").live("click", function(){
    $("#myDiv").hide();
});

score 10 · Accepted Answer

10

確かにあなたはぼかしイベントを探していますか？

于 2009-09-14T20:43:19.323 に答える

score 9 · Accepted Answer

これを行うための最良の方法は次のとおりです。-

    
$（document）.bind（'click'、function（e）{  

 var $ clicked = $（e.target）;

    if（！$ clicked.parents（）。hasClass（ "divtohide"））{
        $（ "。divtohide"）。hide（）;
    }

}）;

score 2 · Accepted Answer

これは私のために働いた、

var mouseOver = false;
$("#divToHide").mouseover(function(){mouseOver=true;});
$("#divToHide").mouseout(function(){mouseOver=false;});
$("body").click(function(){
      if(mouseOver == false) {
           $("#divToHide").hide();
      }
});

score 1 · Accepted Answer

たとえば、リンク要素をクリックしてdivメニューを表示する場合、ぼかし関数をリンク要素にバインドしてdivメニューを非表示にするだけです。

$('a#displaymenu').click(function(){
   $("#divName").toggle();
}).blur(function() {$("#divName").hide()})

score 1 · Accepted Answer

これはクリックアウトイベントを処理する関数であり、ポップアップのセレクターとjquery要素をフィードします。おそらくjqueryプラグインとして機能する方が良いでしょうが、これは十分に単純です。

clickOut = function(selector, element) {
 var hide = function(event) {
  // Hide search options if clicked out
  if (!$(event.originalEvent.target).parents(selector).size())
   $(element).hide();
  else
   $(document).one("click",hide);
 };

 $(document).one("click", hide);
};

したがって、次のようなポップアップ要素がある場合は、次の<div class='popup'>test</div>ような関数を使用できます。clickOut("div.popup", $("div.popup"));

score 1 · Accepted Answer

     $('body').click(function (event) {        
if ($("#divID").is(':visible')) {
            $('#divID').slideUp();
        }
});

これを使用して、divが表示されているかどうかを確認できます。表示されている場合は、オブジェクトを上にスライドします。

score 0 · Accepted Answer

あなたはこれを試すことができます。 http://benalman.com/projects/jquery-clickoutside-plugin/

score 0 · Accepted Answer

これが本格的なイベント駆動型アプローチです

カスタムイベントは、他のクリックベースのイベントのつま先を踏まないように、レイヤーの「呼び出し」と「却下」を処理します
document.bodyは、問題のレイヤーが実際に表示されている場合にのみ、却下イベントをリッスンします

Zeeコード：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(function()
{
  var $layer = $('#layer');
  var $body  = $('html');

  $layer
    .bind( 'summon', function( e )
    {
      $layer.show();
      $body.bind( 'click', dismissLayer );
    } )
    .bind( 'dismiss', function( e )
    {
      $layer.hide();
      $body.unbind( 'click', dismissLayer );
    } )
    .click( function( e )
    {
      e.stopPropagation();
    })
    .trigger( 'dismiss' )
  ;

  function dismissLayer( e )
  {
    $layer.trigger( 'dismiss' );
  }

  // This is optional - this just triggers the div to 'visible'
  $('#control').click( function( e )
  {
    var $layer = $('#layer:hidden');
    if ( $layer.length )
    {
      $layer.trigger( 'summon' );
      e.stopPropagation();
    }
  } );
});

</script>

<style type="text/css">
#layer {
  position: absolute;
  left: 100px;
  top: 20px;
  background-color: red;
  padding: 10px;
  color: white;
}
#control {
  cursor: pointer;
}
</style>

</head>
<body>

<div id="layer">test</div>
<span id="control">Show div</span>

</body>
</html>

私が知っているコードはたくさんありますが、ここでは別のアプローチを示すためだけに使用します。

score 0 · Accepted Answer

ドキュメントでイベントハンドラーを使用すると、次のようにうまく機能します。

関数popUp（要素）
{{
    element.onmousedown = function（event）{event.stopPropagation（）; };
    document.onmousedown = function（）{popDown（element）; };

    document.body.appendChild（element）;
}

関数popDown（要素）
{{
    document.body.removeChild（element）;

    document.onmousedown = null;
}

score 0 · Accepted Answer

私はフォーラムで解決策を見つけました...しかし、元の作者の功績を認めるためにそれを見つけることができません。これがバージョンです（私のコードにあるように変更されています）。

 $(document).bind('mousedown.yourstuff', function(e) {
            var clicked=$(e.target); // get the element clicked                 
            if( clicked.is('#yourstuff')
                 || clicked.parents().is('#yourstuff')) {
                // click safe!
            } else {
                // outside click
                closeIt();
            }
        });

 function closeIt() {
        $(document).unbind('mousedown.emailSignin');
        //...
}

また、ESCキーアップバインディングと、上に示していない「閉じる」htmlアンカーもあります。

score 0 · Accepted Answer

表示する要素を非表示にしたくない場合は、それ自体をクリックして表示します。

var div_active, the_div;

the_div = $("#the-div");
div_active = false;

$("#show-the-div-button").click(function() {
  if (div_active) {
    the_div.fadeOut(function(){
      div_active = false;
    });
  } else {
    the_div.fadeIn(function(){
      div_active = true;
    });
  }
});

$("body").click(function() {
  if div_active {
    the_div.fadeOut();
    div_active = false;
  }
});

the_div.click(function() {
  return false;
});

score -2 · Accepted Answer

ページ全体のイベントを監視する必要がありmouseDownますが、ユーザーがフローティングdiv内をクリックしているときに注意する必要があります。

フロートされたdivにホバーイベントを追加して、ユーザーがホバーしているときmouseDownは無視されるようにすることをお勧めしますが、ホバーされていないときmouseDownは閉じます

javascript - jQueryクリックオフ要素イベント

15 に答える 15

Related

Reference