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

编辑： 对不起，我弄错了，它有很好的支持！ Can I use

Answer 2

为您的图片分配ID：

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

并在图片上使用点击事件来做你想做的任何事情

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