图像和图层（HTML5，canvas，JS，CSS ??）

Question

我在另一个上面有两层。第一层是背景，第二层是花。我怎么知道点击了什么图层。

1. 如果我点击了背景结果，那么点击它的第一层地方就会很好：

2. 如果我点击花卉结果，那么点击它的第二层位置很好：

3. 如果我点击了靠近花朵的背景结果，那么点击的第二层地方就会出现错误：

3.1我得到第二层，因为实际上图像更大，因为图像具有透明的位置：

供测试使用JSFiddle: http://jsfiddle.net/sbkhtvmo/1/

Answer 1

您可以尝试创建一个覆盖花朵的透明SVG路径图层，并将其设置为花朵点击图层，然后将其他所有内容设置为背景点击图层。

Answer 2

使用clientX和clientY获取鼠标在窗口中的位置。您也可以使用jQuery偏移来获取位置。

我发现在stackoverflow上有用的jQuery示例：

$(document).ready(function() {
 $('imageElement').click(function(e) {
 var offset = $(this).offset();
 alert(e.clientX - offset.left);
 alert(e.clientY - offset.top);
 });
});