将 jquery 事件传递到后面的层或使内半径透明

Question

我正在尝试在另一个饼图之上制作一个饼图（见下文），并使用 flot jquery 库。

http://cadmiumconsulting.com/carlsberg/screenshot_01.jpg

我已经设法得到了图表看起来不错，但想在外部饼图上使用鼠标事件。

我的问题是：

如果我先绘制外部图表，而内部图表位于“顶部”，则鼠标事件仅在内层上起作用。

另一方面，如果我先绘制内部图表，然后在“顶部”添加具有内半径的外部图表，则内半径在 Internet Explorer 8 中不起作用，并在内部图表的顶部显示实心圆。

关于如何将事件从一层传递到另一层或强制内半径的透明度有什么想法吗？

任何帮助表示赞赏。

更新 - “globalCompositeOperation”似乎存在问题，这将允许透明度。它包含在 html5 中，但不包含在 excanvas 对象中，这是在 IE8 中复制 canvas 对象的一种 hack。

Answer 1

事件不断移动，因此您应该能够在后台定位图表。我做了这个
简单指南，解释事件如何传播以及如何在 jQuery 中停止它们：

首先，我们创建测试 DOM

<div><br/>
    <a class="a1">Im plain simple</a><br/><br/>
    <a class="a2" href="http://google.com">I prevent my own other events</a><br/><br/>
    <a class="a3">I stop other event</a><br/><br/>
    <a class="a4" href="http://google.com">Im shitty</a><br/><br/>
    <a class="a5" href="http://google.com">Im shitty too</a><br/><br/>
</div>

样式：

div {background:red;}
a {color:white;}
a.a1 {background:yellow;color:black;}
a.a2 {background:green;}
a.a3 {background:blue;}
a.a4 {background:orange;}

jQuery：

我们将 click 事件绑定到 div 来测试我们的传播

$("div").bind("click", function(event) {
    alert("div clicked");
});

Click 事件最终传播到 div

$("a.a1").bind("click", function(event) {
    alert("a.a1 clicked");
});

使用 event .preventDefault() 阻止所有 $("a.a2") 其他绑定点击事件。

$("a.a2").bind("click", function(event) {
    event.preventDefault();
    alert("a.a2 clicked\n\nactually I was supposed to go to http://google.com");
});

使用 event.stopPropagation() 可以防止点击事件传播，并且它永远不会触发 div 上的边界事件

$("a.a3").bind("click", function(event) {
    event.stopPropagation();
    alert("a.a3 clicked");
});

。现在我们将其结合使用。

$("a.a4").bind("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
    alert("a.a4 clicked\n\nI was also supposed to go to http://google.com");
});

另一种方法是返回 false；最后，这也适用于现场活动。

$("a.a5").bind("click", function(event) {
    alert("a.a5 clicked\n\nI was also supposed to go to http://google.com");
    return false;
});

希望这有帮助。

如果您需要更多帮助，请发布一些代码（在其中绑定事件）或图表示例

Answer 2

“globalCompositeOperation”似乎存在允许透明度的问题。它包含在 html5 中，但不包含在 excanvas 对象中，这是在 IE8 中复制 canvas 对象的一种 hack。决定放弃我正在构建的示例并使用画布操作自己创建图表。