CSS 포인터 이벤트를 트리거하지 않는 클릭 이벤트 : 없음

Question

두 이미지가 서로 위에 쌓여 있습니다. img_top에는 '포인터 이벤트 : 없음'이 설정되어 있으므로 클릭하면 img_bottom으로 넘어갑니다. 그러나 jQuery의 trigger('click')을 img_top에 호출하면 클릭 수가 img_bottom으로 전달되지 않습니다.

jQuery의 trigger('click')과 CSS의 pointer-events을 사용하여 이유를 설명하고 하단 이미지로 클릭을 전달하는 방법을 찾을 수 있습니까?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<style type="text/css"> 
    #img_holder { 
     position: relative; 
     width: 20px; 
     height: 20px; 
    } 

    #img_bottom { 
     position: absolute; 
     background: url('/images/cross.png'); 
     width: 16px; 
     height: 16px; 
     z-index: 1; 
    } 

    #img_top { 
     pointer-events: none; 
     position: absolute; 
     background: url('/images/tick.png'); 
     width: 16px; 
     height: 16px; 
     z-index: 2; 
    } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(document).click(function() { 
      alert('clicked'); 
      $("img_top").trigger('click'); 
     }); 

     $("#img_bottom").click(function() { 
      alert('success'); 
     }); 
    }); 
</script> 

<div id="img_holder"> 
    <div id="img_top"></div> 
    <div id="img_bottom"></div> 
</div> 

Answer 1

이 때문에 자바 스크립트 이벤트가 버블 DOM을에 : 여기

내가 사용하고있는 코드입니다. img_bttom은 형제가 img_top이므로 이벤트가 절대로 버블되지 않습니다.

당신은 그것을 강제 할 수 수동으로하지만 :

$("#img_top").click(function(event) { 
    $("#img_botton").trigger(event); 
})