點擊事件不觸發CSS指針事件：無

Question

我有兩個圖像堆疊在一起。 img_top有'pointer-events：none'設置，因此點擊它會將點擊傳遞給img_bottom。但是，如果我調用img_top上的jQuery的trigger('click')，則點擊不會傳遞到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

這是因爲在JavaScript事件冒泡的DOM。 img_bttom是img_top的兄弟姐妹，所以事件永遠不會冒泡。

你可以迫使它雖然手動：

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