Получить нажмите событие из DIV, который находится на вершине другой DIV

Question

Вот что часть UI выглядит

Я имел мусорку работает отлично по щелчку, но это было, когда я не должен есть событие click на синем div. Теперь, когда у меня также есть событие click на синем div, когда я нажимаю trashcan, я получаю синий объект div вместо объекта trashcan. Я пробовал некоторые трюки z-index, но это не сработало.

Любая помощь приветствуется.

<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>