event.target을 사용하여 내부 div에 대한 클릭 감지

Question

클릭하면 (전체 요소) 내부 항목이 트리거되고 표시되는 아코디언이 있습니다. 내부 항목 중 하나에 아코디언을 추가 할 수 있기를 원하므로 event.target을 사용하여 클릭이 발생한 위치를 확인합니다. 어떤 이유로, event.target은 내부 단락의 클릭을 감지하지만 래퍼 div의 클릭은 감지하지 못합니다. 이것의 이유는 무엇입니까?

$(".gestion-accordion-wrap").on("click", function(event){ 

     var $target = $(event.target); 

     if ($target.is ($(".gestion-inner-wrap p"))){ 

     var $innerWrap = $(".gestion-inner-wrap p").parent().parent(); 

     $innerWrap.children().eq(1).slideToggle(300); 
     $innerWrap.find(".mas-detalles-clickable-inner").toggleClass("clickable-spin"); 
     $innerWrap.find(".mas-detalles-after-inner").toggle(); 
     $innerWrap.find(".menos-detalles-after-inner").toggle(); 

     $innerWrap.find(".span-left-line").toggleClass("left-line-grow"); 

     } else { 

    $(this).children().eq(1).slideToggle(300); 
    $(this).find(".mas-detalles-clickable").toggleClass("clickable-spin"); 
    $(this).find(".mas-detalles-after").toggle(); 
    $(this).find(".menos-detalles-after").toggle(); 
    $(this).find(".span-left-line").toggleClass("left-line-grow"); 
}}) 

왜 이런 일이 감지 :

if ($target.is ($(".gestion-inner-wrap p"))){ 

하지만이?

if ($target.is ($(".gestion-inner-wrap"))){ 

:

Answer 1

이것은 DOM이 작동하는 방식이다 (참고이 선택에 더 p을 없다)! . 당신이 필요로하는 대신 currentTarget 속성입니다 뭐야

target 속성은 특정 이벤트가 발생하는 그 정확한 요소, 중요하지 않은 이벤트를 잡은 핸들러를 일치하기위한 것입니다. 이벤트는 DOM을 횡단

currentTarget

은 이벤트를 현재 대상을 식별한다. 이벤트가 발생한 요소를 식별하는 event.target과는 달리 이벤트 핸들러가 연결된 요소를 항상 참조합니다.

$(".gestion-accordion-wrap").on("click",'*', function(event){ 

    var $target = $(event.currentTarget); 
    alert($target.is ($(".gestion-inner-wrap"))); // TRUE 

} 

https://jsfiddle.net/mbzp2xcp/