点击仅在点击的像素不透明时在图像上注册的事件？

Question

点击事件是否可以仅在点击的像素不透明时才在图像上注册？

如果我有一个直角三角形图像，只有实际三角形本身的点击事件寄存器，而不是整个框，其中一半是空的。

如果不使用<canvas>，这是否可行？

我已经在项目中使用了jQuery，如果它有某种方法可以做到这一点。

Answer 1

不是简单的html和图像。

你可能能够使用（相对不支持的静止）css背景剪辑，或使用（我不敢相信我推荐这个）图像映射。更多代码繁重的选项包括检查点击点的像素，但JS并不总是能够访问图像数据（取决于浏览器），并且服务器执行此操作的ajax请求对我来说太过分了。 Canvas和SVG对你来说可能是不错的选择，但它们引入了你必须要注意的额外依赖，这可能是不值得的。

或者，你可以create the triangle in HTML/CSS。 ：）

Answer 2

您可以定义image map来绕过图片的非透明部分并处理其点击次数。图像映射支持onclick event attribute。