單擊較低的z-index元素

Question

我有一個div和一張彼此重疊的圖像。 圖片在div的前面。 是否可以單擊div忽略圖像？

<img src="smiley.gif" style="z-index: 2; width:200px; height 200px;"> 
<div id="theDiv" style="background-color: #f60; width:200px; height:200px;"></div>

$('#theDiv').click(function(){
   alert("you've clicked on "+this.id);
});

Answer 1

您必須使用CSS pointer-events屬性。 只需添加到img樣式：

pointer-events: none;

編輯：對不起，我犯了一個錯誤，它有很好的支持！ 我可以用嗎

Answer 2

為您的圖像分配一個ID：

<img id='image' src="smiley.gif" style="z-index: 2; width:200px; height 200px;">

並使用圖片上的click事件來對div進行任何操作

$('#image').click(function(){
    //perform tasks on your div here
    $('#theDiv').css('background-color', '#fff'); 
});