单击较低的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'); 
});