得到的div是另一個DIV

Question

這裏的頂部單擊事件是UI一塊看起來像什麼

我有垃圾桶工作的點擊很好，但是當時我沒得在藍色的div上有一個點擊事件。現在，我還在藍色的div上有一個點擊事件，當我點擊垃圾箱時，我得到的是藍色div對象而不是垃圾桶對象。我嘗試了一些Z-索引技巧，但沒有奏效。

任何幫助表示讚賞。

<td id="ea-13" class="activityTableCell"> 
    <div style="width:90px; margin-left:0px" class="eventTimeSpan"></div> 
    <div id="NewActivityContainer-13" class="activityContainerExisting"> 
     <div data-uid="57386445" class="label label-sm label-info newActivityClass point" style="width:59px; top:-1px; left:30px; z-index:4000" title="Mobile Game Party"> 
     Mobile Game Party 
      <div data-isactivity="1" data-packageid="" data-elid="57386445" class="xRemove" style="left:46px;z-index:8000"><i class="fa fa-trash font-red" title="Remove"></i> 
      </div> 
     </div> 
    </div> 
</td> 

單擊代碼：

$(document).on("click", ".newActivityClass", function(){ 
    console.log(this); 
    ...snip... 
} 

$(document).on("click", ".xRemove,.aRemove", function(){ 
...snip... 
} 

Answer 1

你可以嘗試event.stopPropagation()

$(document).on("click", ".xRemove,.aRemove", function(event){ 
    event.stopPropagation(); 
    // code here 
}); 

來源：https://api.jquery.com/event.stoppropagation/

Answer 2

是如前所述，event.stopPropagation（）做的工作適合你。

對於的jsfiddle代碼：https://jsfiddle.net/peacock/r0kk5ps9/

$(document).on("click", "#inner", function(e){ 
 
    alert("clicked inner"); 
 
    e.stopPropagation(); 
 
}); 
 

 

 
$(document).on("click", "#outer", function(e){ 
 
    alert("clicked outer"); 
 
    e.stopPropagation(); 
 
});

#outer { 
 
    width : 100px; 
 
    height : 100px; 
 
    background-color: #777777; 
 
} 
 

 
#inner { 
 
    position: relative; 
 
    top : 50%; 
 
    left:50%; 
 
    width : 30px; 
 
    height : 30px; 
 
    background-color: #232323; 
 
} 
 

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