div領域の内側または外側のクリックを検出したいと考えています。トリッキーな部分は、divに他の要素が含まれていることです。div内の要素の1つがクリックされた場合は、div内の要素がクリックされた場合と同様に、内部のクリックとみなされます。クリック。javascriptを使用してdiv外をクリックすると検出する
私はたくさんのことを研究してきましたが、私が見つけることができるのはjqueryの例であり、純粋なjavascriptが必要です。
ご意見をお寄せください。
それは個々のユースケースに依存しますが、この例では、メインのdiv例えば内部の他のネストされた要素がある可能性が高いようですねより多くのdivs、リストetc. Node.containsを使用すると、対象の要素がチェックされているdiv内にあるかどうかをチェックするのに便利な方法です。
ネストされたリストが内部にある例は、hereです。
これは私が必要とするものです。ありがとうございました。 –
シンプルで清潔！ – Copacel
クリックした要素は、あなたがチェックしたりしないようにしたいdiv要素であるかどうかをチェックすることができます：
document.getElementById('outer-container').onclick = function(e) {
if(e.target != document.getElementById('content-area')) {
console.log('You clicked outside');
} else {
console.log('You clicked inside');
}
}
がHereを参照。
のインラインonclick関数から呼び出される関数を呼び出すことができます。それは価値があります。あなたは' .addEventListener'を使ってリスナーを追加するほうがはるかに優れています。しかし、イベントが受信されたときに起動するいくつかの機能を設定できます。また、イベントを処理する関数の中で 'this'キーワードに有意義なアクセスを得ると、' this'は要素自体に解決されます。例えば、どの要素がイベントをトリガしたかを知ることができます。また、トリガされたイベントオブジェクトハンドラは最初の場所にあります。いずれの場合でも、イベントハンドラを取り付ける方法はかなり強力です。 :) – enhzflep
更新......... –
は、あなたはそれが純粋なJavaScriptを使用して、このソリューションを試してみてください、あなたのクリックイベント
if(event.target.parentElement.id == 'yourID')
の内側にそのためかどうかを確認を適用することができ、それがあなたの問題を解決します。私はより良い概観のためにCSSを追加しました...しかしそれは必要ではありません。
document.getElementById('outer-div').addEventListener('click', function(){
alert('clicked outer div...');
});
document.getElementById('inner-div').addEventListener('click', function(e){
e.stopPropagation()
alert('clicked inner div...');
});#outer-div{
width: 200px;
height: 200px;
position: relative;
background: black;
}
#inner-div{
top: 50px;
left: 50px;
width: 100px;
height: 100px;
position: absolute;
background: red;
}<div id="outer-div">
<div id="inner-div">
</div>
</div>私のためにうまくいけば、それは他人を助けるかもしれないこれのためのハックを思い付いた。
私はダイアログDIVをポップアップすると同時に、画面の全体をカバーしている透明なDIVを同時に表示します。
この目に見えない背景DIVは、ダイアログDIV onClickを閉じます。
これはかなり簡単なので、ここでコードを気にするつもりはありません。あなたがそれを見たいと思ったらコメントにLMKを入れ、それを追加します。
HTH！
http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element?rq=1次に、javascriptのクリックバインディングのjqueryクリックバインディングを変更します。 – AdamJeffers
jQueryを使用していた例はありますか？おそらく、あなたはバニラのJSにそれらを "翻訳"しようとする必要がありますし、あなたがどのようにわからない場合はそれについて尋ねる。 – noppa
HTML要素 '
' –