web-dev-qa-db-ja.com

Javascriptがdiv外のクリックイベントを検出する

Id = "content-area"のdivがあります。ユーザーがこのdivの外側をクリックすると、そのdivの外側をクリックしたという事実をユーザーに警告したいと思います。 JavaScriptを使用してこの問題を解決するにはどうすればよいですか？

<div id = "outer-container">
   <div id = "content-area">
      Display Conents 
   </div>
</div>
javascripthtmleventsclick
16
Dibish

純粋なJavascriptで

このフィドルをチェックして、それがあなたが望んでいるものかどうかを確認してください！

document.getElementById('outer-container').onclick = function(e) {
    if(e.target != document.getElementById('content-area')) {
        document.getElementById('content-area').innerHTML = 'You clicked outside.';          
    } else {
        document.getElementById('content-area').innerHTML = 'Display Contents';   
    }
}

http://jsfiddle.net/DUhP6/2/

22
jollelj

OnClick-Eventをコンテンツエリア外の要素にバインドします。体。次に、イベント内で、ターゲットがコンテンツ領域か、コンテンツ領域の直接または間接の子かを確認します。そうでない場合は、警告します。

子かどうかをチェックする関数を作成しました。ノードの親が検索された親である場合、trueを返します。そうでない場合は、実際に親があるかどうかを確認します。そうでない場合は、falseを返します。親はあるが、検索されたものではない場合、親の親が検索された親であるかどうかを確認します。

function isChildOf(child, parent) {
    if (child.parentNode === parent) {
      return true;
    } else if (child.parentNode === null) {
      return false;
    } else {
      return isChildOf(child.parentNode, parent);
    }
}

Live Example （content-area = grey）もチェックしてください！

12
Butt4cak3

Node.contains（） メソッドは、ノードが特定のノードの子孫であるかどうかを示すブール値を返します

を使用してイベントをキャッチできます

document.addEventListener("click", clickOutside, false);
function clickOutside(e) {
   const inside = document.getElementById('content-area').contains(e.target);
}

適切な場所でリッスンされたイベントを削除することを忘れないでください

document.removeEventListener("click", clickOutside, false)
8
Jan Vorcak

私はあなたのためにこれを行うためにシンプルで小さな js library を作りました：

ネイティブのaddEventListenerをハイジャックしてoutclickイベントを作成し、.onoutclickのプロトタイプのセッターも持っています

基本的な使用法

Outclickを使用すると、DOM要素にイベントリスナーを登録して、その要素である別の要素またはその中の別の要素がクリックされたかどうかを検出できます。これの最も一般的な使用法はメニューです。

var menu = document.getElementById('menu')

menu.onoutclick = function () {
    hide(menu)
}

これは、addEventListenerメソッドを使用して行うこともできます

var menu = document.getElementById('menu')

menu.addEventListener('outclick', function (e) {
    hide(menu)
})

または、html属性outclickを使用してイベントをトリガーすることもできます。これはダイナミックHTMLを処理しないため、追加する予定はありませんが、まだ

<div outclick="someFunc()"></div>

楽しんで！

5
Joe Thomas

使用する document.activeElementどのHTML要素がアクティブであるかを確認します。

リファレンスは次のとおりです。 MDNのdocument.activeElement

2
FidEliO
$('#outer-container').on('click', function (e) {
     if (e.target === this) {
        alert('clicked outside');
     }
});

これは、outer-containerの内側をクリックするが、content-areaの外側をクリックする場合です。

1
TomNg

ここにフィドルがあります： http://jsfiddle.net/uQAMm/1/

$('#outercontainer:not(#contentarea)').on('click', function(event){df(event)} );
function df(evenement)
{
    var xstart = $('#contentarea').offset().left;
    var xend = $('#contentarea').offset().left + $('#contentarea').width();

    var ystart = $('#contentarea').offset().top;
    var yend = $('#contentarea').offset().top + $('#contentarea').height(); 

    var xx = evenement.clientX;
    var yy = evenement.clientY;

    if ( !(  ( xx >=  xstart && xx <=  xend ) && ( yy >=  ystart && yy <=  yend )) )
    {
        alert('out');
    }


}
0
Pimento Web

dOMアクセスに最適なjqueryを使用します

$(document).click(function(e){
 if($(e.target).is("#content-area") || $(e.target).closest("#content-area").length)
  alert("inside content area");
else alert("you clicked out side content area");
});
0
Ronak Patel

これをドキュメントに追加します。

<script>
document.onclick = function(e) {
  if(e.target.id != 'content-area') alert('you clicked outside of content area');
}
</script>
0
Simon Rigét