图像和层(HTML5，canvas，JS，CSS ??)

Question

我有两层，一层在另一层。第一层是背景，第二层是花。我怎么知道是哪一层点击的。

1. 如果我点击了背景结果，点击的是返回第一层的位置：

​

1. 如果我点击了花的结果，这是很好的回报第二层的地方，点击：

​

1. 如果我单击了花结果附近的背景，那么点击的第二层位置就不好了：

​

3.1我得到第二层是因为实际上图像更大，因为图像有透明的地方：

​

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

Answer 1

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

Answer 2

使用clientX和clientY获取鼠标在window.You中的位置，也可以使用jQuery偏移量来获取位置。

jQuery示例，我发现它在堆栈溢出方面很有用：

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