Jquery 单击PNG图像-仅当单击的坐标是透明的时

我有这样一个形象：

我希望这样，当我单击透明部分时，单击应该穿过底层元素，但是当我单击非透明部分时，这个图像元素应该得到单击

---

这可能吗？

对于您的场景，在图像的非透明区域捕获点击事件就足够了吗

这可以使用一个脚本和一些JavaScript来完成：

使用临时画布元素

获取覆盖图像鼠标向下 坐标

用该图像数据填充画布

从画布读取1px图像数据（来自相同的坐标）。
如果检索到的Alpha通道数据为

0

，则表示 透明

如果像素是透明的，则将pointerEvents设置为

“none”

并使用

在下面的元素上触发

“单击”

事件

重置所有覆盖的点事件返回到

“自动”

var ctx=document.createElement（“canvas”）.getContext（“2d”）；
$（“#徽标”）。在（“鼠标向下”，函数（事件）{
//获取单击坐标
var x=event.pageX-this.offsetLeft，
y=event.pageY-this.offsetTop，
w=ctx.canvas.width=this.width，
h=ctx.canvas.height=this.height，
阿尔法
//在画布上绘制图像
//并读取Alpha通道值
ctx.drawImage（this，0，0，w，h）；
alpha=ctx.getImageData（x，y，1，1）.data[3]；/[0]R[1]G[2]B[3]A
//如果像素是透明的，
//检索下面的元素并触发其单击事件
如果（alpha==0）{
this.style.pointerEvents=“无”；
$（document.elementFromPoint（event.clientX，event.clientY））.trigger（“单击”）；
this.style.pointerEvents=“自动”；
}否则{
log（“单击了徽标！”）；
}
});
$（“#绿色”）。在（“单击”，函数（）上）{
log（“绿色图像点击！”）；
});
img{border:1px solid#000；}
img+img{位置：绝对；顶部：0；左侧：0；}

可能重复使用地图或svg：（是的，这样就可以了。这是最好的方法，还是更容易获取单击像素的alpha值并检查透明度？因为使用此方法，我需要为每个图像生成贴图。如果您能够找到如何获取单击像素的alpha值，请尝试！否则，只需手动crea可能需要更少的时间每个图像的te
map
s（取决于图像数量及其透明度的复杂性）。我只用了几秒钟就在我的答案中创建了地图，但它的边缘非常粗糙。跟踪图像不透明区域是一项艰巨的工作。哇，这太棒了。我希望我也能接受另一个答案，但这更优雅、更易用。谢谢。对于透明像素，单击事件在哪里传播到？我试图从基础图像捕获它，但它没有触发。如果父元素有单击侦听器，则单击透明部分将传播。否则…单击将停止传播。@尼克，如我所说，使用
elementFromPoint
。诀窍是快速隐藏徽标，从point获取元素（下面的元素），触发其单击事件，然后最终显示徽标。隐藏/显示不可见，但允许从坐标中获取正确的元素：。无论如何，如果此评论有点模糊，请更新我的答案：）回答很好。谢谢。