Question

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

这是代码：的的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。问题是，当它作为间隔尝试时，它会阻止页面上的所有点击，我无法保存它。

Answer 1

嗯..你的问题是关于2个句子，显示没有代码..但下面是我最好的猜测。切换z-index。

你想要的元素作为背景。

#elementyoudontwanttobeclickable { 
     z-index: 1;
}

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

#elementyouDOwanttobeclickable { 
         z-index: 2;
}

单击图像顶部不使用画布的事件

1 个答案: