web-dev-qa-db-ja.com

jquery：div内かどうかにかかわらずマウスクリックを取得

私はこのHTMLページを持っています

<html>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div id='in_or_out'>e</div>
<div>f</div>
</body>
</html>

a、b、c、d、e、およびfは、プレーンテキストだけでなくdivでもかまいません。

マウスクリックイベントを取得したいのですが、それが#in_or_out divの内側か外側かをどうやって知ることができますか？

編集::みんな、divがクリックされているかどうかを確認する方法は知っていますが、クリックがそのdivの外側にあるときにイベントを発生させたいです

javascriptjquerymouse
15
trrrrrrm
$("body > div").click(function() {
    if ($(this).attr("id") == "in_or_out") {
        // inside
    } else {
        // not inside
    }
});

編集：否定があることをちょうど学んだ：

$("body > div:not(#in_or_out)").click(function(e) {
    // not inside
});
24
harpax

Divの内側または外側をクリックしたかどうかを検出する場合は、イベントハンドラーをdocumentElementに設定し、他の要素から上に伝播させます。

$("html").click(function (e)
{
    if (e.target == document.getElementById("in_or_out"))
        alert("In");
    else
        alert("Out!");
});
9
Andy E

多分これはあなたを助けるでしょう

$('body').click(function(){
    //do smth
});
$('div#in_or_out').click(function(e){
    e.stopPropagation();
    // do smth else
});
7
Ionuț Staicu

あなたが望むものに依存します。コードを実行するだけの場合は、inside_#in_or_out_のときに、次のことができます。

_$('#in_or_out').click(function(){ /* your code here */ });
_

マウスが_#in_or_out_にあるかどうかを示すステータス変数を設定できます。

_var inside = false;

$('#in_or_out').hover(function() { inside = true; }, function() { inside = false; });
_

次に、クリックが発生するたびに、クリックが_in_or_out_内にあったかどうかをinsideで確認できます。

参照： .hover()

更新：

clickハンドラーをバインドする要素に関係なく、いつでもこれを行うことができます。

_$('element').click(function() {
     if ($(this).attr('id') !== 'in_or_not') {

     }
 });
_
4
Felix Kling

中には

$("#in_or_out").click(function() {
    // do something here
});

外のために...私にはわかりません。

編集： body-tagについても同じことを試みることができます（ドキュメント自体にクリックハンドラーを割り当てます）。しかし、それによって両方のイベントが発生するかどうかはわかりません。

3
Bobby

このような？

$("#in_or_out").click(function() {
    alert("IN DIV!");
});
1
dale