Jqueryを使用して内部divへのクリックイベントを検出する方法

Question

モバイルのメニューを作成して、オーバーレイのクリック機能を追加したいと思います。

メニュー（紫色部分）をクリックすると閉じる必要はありませんが、青色の部分をクリックすると閉じる必要があります。

紫色の部分だけを取得するjQueryを作成しましたが、青色の部分をクリックするとalertは表示されませんでした。 試験のために私のJSFiddleがあると思います。ここ

そして、私のコードは、あなたがouter contentにイベントを追加することによって、それを行うと、その後の要素をチェックするためにevent.targetプロパティを使用することができます

$('.outer-content .inner-content').on('click', function() { 
 
    $(".outer-content .inner-content").data('clicked', 'yes'); 
 
    var isClicked = $('.outer-content').data('clicked'); 
 
    if (isClicked == 'yes') { 
 
    alert("clicked the blue block"); 
 
    } else { 
 
    alert("clicked the purple block"); 
 
    } 
 
});

.outer-content { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.inner-content { 
 
    width: 300px; 
 
    background: purple; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="outer-content"> 
 
    <div class="inner-content"></div> 
 
</div>

Answer 1

なぜ青の要素を直接ターゲットにすることはなく、下に示すようにクリックするとコードを閉じるように処理します。

紫色の要素がクリックされたときに実行する他のコードが必要な場合は、それを個別にバインドします。

$('.outer-content').on('click', function(e) { 
 
    if (e.target == this) { 
 
    // add "close" code here 
 
    alert("will close"); 
 
    } 
 
}); 
 

 
// You still can add code when clicking the purple element if needed... 
 
$('.inner-content').on('click', function(e) { 
 
    alert("I'm purple but separate code and will not close"); 
 
});

.outer-content { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.inner-content { 
 
    width: 300px; 
 
    background: purple; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="outer-content"> 
 
    <div class="inner-content"></div> 
 
</div>

Answer 2

$('.outer-content').on('click', function(event) { 
 
    if ($(event.target).hasClass('inner-content')) { 
 
    alert("clicked the purple block"); 
 
    } else { 
 
    alert("clicked the blue block"); 
 
    } 
 
});

.outer-content { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.inner-content { 
 
    width: 300px; 
 
    background: purple; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="outer-content"> 
 
    <div class="inner-content"></div> 
 
</div>

Answer 3

ですクリックされたのは

$('.outer-content').on('click', function(e) { 

    if($(e.target).hasClass('outer-content')){ 
     alert("clicked the blue block"); 
    } else { 
     alert("clicked the purple block"); 
    } 
}); 

イベントバブリングのため、子要素のイベントは親要素にも伝播されます。

Answer 4

javascriptには基本的に2つのイベントモデルがあります。イベントキャプチャとイベントバブリング。イベントのバブリングでは、内部のdivをクリックすると、内側のdivのクリックイベントが最初に開始され、次に外側のdivのクリックが開始されます。イベントキャプチャでは、最初に外側のdivイベントが発生し、内側のdivイベントが発生しました。イベントの伝達を停止するには、このコードをclickメソッドで使用します。 JSFIDDLE

e.stopPropagation(); 

あなたのコード：

$('.outer-content').on('click', function(e) { 
 
    alert("clicked the blue block"); 
 

 
}); 
 
$('.inner-content').on('click', function(e) { 
 
    alert("clicked the purple block"); 
 
    e.stopPropagation(); 
 
});

.outer-content { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.inner-content { 
 
    width: 300px; 
 
    background: purple; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer-content"> 
 
    <div class="inner-content"></div> 
 
</div>

Answer 5

$('.outer-content, div:not("inner-content")').on('click', function() { 
 
    $(".inner-content").slideToggle(); 
 
});

.outer-content { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.inner-content { 
 
    width: 300px; 
 
    background: purple; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="outer-content"> 
 
    <div class="inner-content"></div> 
 
</div>

私は、メニュー（紫の部分）、それは、閉じる必要がdoesntのが、私は青いセクションの クリックして、その必要性がクローズするをクリックし

Answer 6

$('div').on('click', function(e) { 
 
    e.preventDefault(); 
 
    e.stopImmediatePropagation() 
 
    if($(e.target).is('.inner-content')){ 
 
    \t alert("clicked the purple block"); 
 
    }else{ 
 
    \t alert("clicked the blue block"); 
 
    } 
 
});

.outer-content{ 
 
    width:100%; 
 
    height:200px; 
 
    background:lightblue; 
 
    position:relative; 
 
} 
 

 
.inner-content{ 
 
    width:300px; 
 
    background:purple; 
 
    position:absolute; 
 
    margin:auto; 
 
    top:0; bottom:0; right:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer-content"> 
 
    <div class="inner-content"></div> 
 
</div>