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

时间:2011-10-05 14:25:01

标签: jquery events hover flot

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

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

我已经设法使图表看起来正确,但想在外部饼图上使用鼠标事件。

我的问题是:

如果我首先绘制外部图表,内部图表在“顶部”,鼠标事件仅适用于内层。

另一方面,如果我首先绘制内部图表并在内部半径上添加“顶部”外部图表,内部半径在Internet Explorer 8中不起作用并在内部顶部显示实心圆圈图表。

关于如何将事件从一个层传递到另一个层或强制内半径的透明度的任何想法?

任何帮助表示感谢。

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

2 个答案:

答案 0 :(得分:0)

旅行的活动,您应该能够在后台定位图表。我做了这个 简单的指南,解释事件如何传播以及如何在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的:

我们将点击事件绑定到div来测试我们的旅行

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

最终转到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");
});

另一种方式是返回虚假;最后,这也适用于live事件。

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

希望这会有所帮助。

如果您需要更多帮助,请将一些代码(绑定事件的地方)或示例发布到图表

答案 1 :(得分:0)

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