Video-JS 자식 이벤트로 전달되는 클릭 이벤트를 방지합니다.

Question

Video-JS 플러그인으로 간단한 비디오 페이지를 만들었습니다. 동영상은 팝업 모듈에서 재생됩니다. 비디오 랩퍼가 클릭 될 때마다 비디오가 아닌이 팝업을 닫으려고합니다. 하지만 그렇게하지 못하고 비디오 컨트롤을 클릭해도 팝업이 닫힙니다. 내 코드는 다음과 같습니다

$('.popup-video').click(function() { 
    $(this).fadeOut(500); 
    // Pause Video 
}); 
$('.popup-video>div').click(function(e) { 
    e.stopPropagation(); 
}); 
$('.popup-video>video').click(function(e) { 
    e.stopPropagation(); 
}); 

.stopPropagation 방법은 아니지만, 지금 트릭을하는 데 사용! 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

클릭 한 요소 (이벤트 대상)가 실제로 이벤트 처리기 (this)에서 참조 된 요소인지 확인하고있을 경우에만 페이딩을 수행 할 수 있습니다. 그러면 하위 요소에서 전파되고 함수가 실행되는 클릭과 관련된 문제를 피할 수 있습니다.

$('.popup-video').click(function(e) { 
    if (e.target === this) $(this).fadeOut(500); 
});