Raphaeljs 图像上的单击事件在 IE9 中不起作用
在下面的代码中,第一个单击事件触发,但其余的事件不会触发 - 在 IE 9 中。它在 Chrome 和 Firefox 中工作正常(显然 IE 8 - 尽管我还没有测试过)
$(document).ready(function () {
var d = paper.image("/Content/images/male.png", 100, 100, 32, 32);
d.click(function (event) {
alert(this.node);
});
$.each(hierarchy.children, function (index, value) {
DrawNode(paper, value);
});
})
function DrawNode(paper, currentPerson) {
var currentNode = paper.image("/Content/images/male.png", currentPerson.X, currentPerson.Y, 32, 32).attr({ stroke: "none", fill: "none" });
currentNode.click(function (event) {
alert(this.node);
});
}
在 IE9 中,单击根节点显示 [object SVGImageElement] - 事件不会触发的其他节点。在其他浏览器中,您会为所有节点获得相同的 (SVGImageElement)
In the following piece of code, the first click event fires, but the rest do not - in IE 9. It works fine in Chrome and Firefox (and evidently IE 8 - although I have not tested it)
$(document).ready(function () {
var d = paper.image("/Content/images/male.png", 100, 100, 32, 32);
d.click(function (event) {
alert(this.node);
});
$.each(hierarchy.children, function (index, value) {
DrawNode(paper, value);
});
})
function DrawNode(paper, currentPerson) {
var currentNode = paper.image("/Content/images/male.png", currentPerson.X, currentPerson.Y, 32, 32).attr({ stroke: "none", fill: "none" });
currentNode.click(function (event) {
alert(this.node);
});
}
In IE9, clicking on the root node shows [object SVGImageElement] - the other nodes the event doesn't fire. In the other browsers, you get the same (SVGImageElement) for all the nodes
对于任何正在寻找的人来说,这都是一个临时解决办法。您可以在图像后面放置一个正方形、圆形或任何其他矢量,并将事件绑定到该矢量。
在 IE9 中,它的工作原理是单击图像后面的形状 - 在所有其他浏览器上,都会触发图像事件。
This is a temporary work around for anyone who is looking. You can put a square, circle or any other vector behind your image and bind the events to that.
In IE9 it works by clicking on the shape behind the image - on all other browsers, the image event fires.