一個大div里面包裹一個小div,里面的小div的點擊事件不觸發外面的這個大div的點擊事件

一開始上html代碼

<div id="div1" style="background: blue;width: 100px; height: 100px;">
        <div id="div2" style="background: red;width: 70px; height: 70px;">
        </div>
</div>

就是這樣的一段代碼，

大的div==>div1

小的div==>div2

當代碼是

$('#div1').click(function(e) {
    alert('div1');
})
$('#div2').click(function(e) {
    alert('div2');
})

正常這樣寫點擊代碼，當點擊在div2上這個區域，會觸發到div1的點擊事件，就是會先彈出div2-->div1

但是我想要的效果只是想點擊div2區域時，只彈出div2

 

 

那現在這里有兩種方案，還有的請歡迎補充

第一種，因為是冒泡了，所以阻止冒泡

$('#div1').click(function(e) {
    alert('div1');
})
$('#div2').click(function(e) {
    e.stopPropagation()
    alert('div2');
})

這樣的話，點擊div2區域只會彈出div2

點擊div1只會彈出div1

第二種，因為div2覆蓋在div1里面，所以不管你點擊那個地方，都是觸發了div1的區域，所以當點擊的時候，判斷這個區域是不是div2的區域，如果是的話，就觸發div2，如果不是的話就觸發div1

 $('#div1').click(function(e){
     // e.preventDefault();
     if($(e.target).is('#div2')){
         alert('div2')
     }else{
         alert('div1')
     }
 })

 

 

 

好了 我試過的就是這兩種方案，歡迎大家指教補充

 

 

 

現在還有一種情況，就是如果是兩個div外面還有一個a標簽的話，想點擊大的div的時候跳轉鏈接，點擊小的div的話還是執行其他操作的話

html結構代碼如下

   <a href='http://www.baidu.com'>
    <div id="div1" style="background: blue;width: 100px; height: 100px;">
        <div id="div2" style="background: red;width: 70px; height: 70px;">
        </div>
    </div>
  </a>

現在的效果是想點擊div2的時候執行一個事件，點擊div1的時候跳轉鏈接

這樣的話可以有兩種方案

第一種:阻止默認事件也就是a標簽跳轉

$('#div2').click(function(e) {
    
    alert('div2');
    event.preventDefault();  
})

第二種：return

$('#div2').click(function(e) {
    
    alert('div2');
    return false;
})