通过具有部分透明背景的元素触发事件

Question

我坚持解决一个看似简单的问题。

http://jsfiddle.net/HAKvN/3/

通过点击白色气泡下方的黑框，您将触发一个事件，从而显示警报。

白色气泡代表一个div，红色边框表示其边界。气泡是保存为带有Alpha通道的PNG文件的背景图像。

我试图通过点击带有红色边框的框内的透明背景来触发事件（这个空间没有被气泡本身占用） - 它甚至可能吗？

Answer 1

不幸的是我不相信可以轻松完成（也许如果你有一个数组中的所有坐标），另一种选择是这样的：http://jsfiddle.net/HAKvN/4/（删除边框以提供更好的渲染）< / p>

编辑：稍微好一点的解决方案：http://jsfiddle.net/HjrCE/2/。函数是infoBoxSplit，可以在任何jquery对象上调用（例如：$('.infoCloud').infoBoxSplit(5);​）。它需要一个参数来指定每个部件的高度应该有多大（在本例中为5px）。边界就是为了展示正在发生的事情。

Answer 2

如果我错了，请有人纠正我，但我不相信你想用javascript做什么。就脚本而言，PNG是一个方块。它没有意识到图像中的白色气泡。

如果你想做这样的事情，你最好的选择可能会涉及一个HTML5画布元素。