jQueryのオーバーラップdivが文句を言わないのdivの隠されたのonclickを無効

Question

jQuery('#warning').click(function() { 
 
    console.log('clicked at warning'); 
 
}); 
 

 
jQuery('#content').click(function() { 
 
    console.log('clicked at content'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="warning"> 
 
    <div id="content">This is the content</div> 
 
    dsfdfsdsfdsfdsfdsfdsfdsf 
 
</div>

フィドル：

https://jsfiddle.net/73jykhj0/は、残念ながら、あまりにもwarningでクリックトリガーcontentでクリックします。 warningでクリックを排除するにはどうすればよいですか？

Answer 1

防止イベントevent.stopPropagation()

jQuery('#warning').click(function() { 
 
    console.log('clicked at warning'); 
 
}); 
 

 
jQuery('#content').click(function(event) { 
 
    event.stopPropagation() 
 
    console.log('clicked at content'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="warning"> 
 
    <div id="content">This is the content</div> 
 
    dsfdfsdsfdsfdsfdsfdsfdsf 
 
</div>

---

それとも、あなたはニードフルを行い、その後event.targetを使用して、イベントのターゲットを確認することができますを使用してバブルアップから。

jQuery('#warning').click(function(event) { 
 
    if ($(event.target).is('#content')) { 
 
    return; 
 
    } 
 
    console.log('clicked at warning'); 
 
}); 
 

 
jQuery('#content').click(function() { 
 
    console.log('clicked at content'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="warning"> 
 
    <div id="content">This is the content</div> 
 
    dsfdfsdsfdsfdsfdsfdsfdsf 
 
</div>

Answer 2

下記を参照してください。コンテンツをクリックするとreturn falseが追加されます。

jQuery('#warning').click(function() { 
 
    alert('clicked at warning'); 
 
}); 
 

 
jQuery('#content').click(function() { 
 
    alert('clicked at content'); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="warning"> 
 
    <div id="content">This is the content</div> 
 
    dsfdfsdsfdsfdsfdsfdsfdsf 
 
</div>