单击事件不适用于图像顶部的画布答案

【问题标题】：Click events not working with canvas on top of image单击事件不适用于图像顶部的画布
【发布时间】：2015-04-24 14:58:28
【问题描述】：

将画布放在图像顶部会使所有点击事件都不起作用。此外，使图像不可选择或不可拖动也不起作用。如何使点击事件起作用？

代码如下： Javascript

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.canvas.addEventListener('click', function() { 
    console.log('a');
}, false);

HTML5

<section>
<img src = "http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
<canvas id = "canvas"></canvas>

CSS

img{
    position:absolute;
    z-index:1;
}

canvas{
    width:480px;
    height:640px;
    border:1px solid white;
    position:relative;
    z-index:20;
}

section{
    position:relative;
    display:inline-block;
}

http://jsfiddle.net/pmht5asf/ 在 jsfiddle 上工作，但在我的情况下，我需要它作为一个 inverval。问题是当它作为间隔尝试时，它会阻止页面上的所有点击，我无法保存它。

【问题讨论】：

这里不需要代码。添加图像，将画布放在顶部并添加点击事件。不工作。
@GSquadron 添加点击事件 做什么？图片还是画布？
@GSquadron 无论如何你必须展示你的代码。否则你的问题是题外话
@GSquadron 总是需要代码！
点击事件似乎对 jsbin 有效。

标签： javascript canvas

【解决方案1】：

嗯..您的问题大约是 2 句话，没有显示代码.. 但以下是我的最佳猜测。切换 z-index。

你想要作为背景的元素。

#elementyoudontwanttobeclickable { 
     z-index: 1;
}

您希望在下方可点击的元素。

#elementyouDOwanttobeclickable { 
         z-index: 2;
}