为什么在拉斐尔更改文本取消事件？

我有一个双方的mouseup一个拉斐尔文本元素并单击事件处理程序。如果我更改了mouseup事件处理程序中的文本，则单击事件处理程序不会再被调用。为什么会发生？为什么在拉斐尔更改文本取消事件？

我测试在Chrome，Firefox和Opera下面的代码：

<!doctype html> 
<html> 
<head> 
    <script type='text/javascript' src='jquery-1.7.1.js'></script> 
    <script type='text/javascript' src='raphael-min.js'></script> 
    <script type='text/javascript'> 
window.onload = function() { 
    var paper = Raphael(document.getElementById('raphael'),500,200); 
    var text1 = paper.text(100, 20, "Just movin'"); 
    var text2 = paper.text(100, 40, "Hello World"); 

    $(text1.node).mouseup(function() { 
    text1.attr({"x" : "200"}); 
    console.log("text1 mouseup"); 
    }); 
    $(text1.node).click(function() { 
    console.log("text1 click"); // Is called 
    }); 

    $(text2.node).mouseup(function() { 
    text2.attr({"text": "Goodbye world"}); 
    console.log("text2 mouseup"); 
    }); 
    $(text2.node).click(function() { 
    console.log("text2 click"); // Is not called 
    }); 
} 
    </script> 
</head> 
<body> 
<div id="raphael"></div> 
</body> 
</html>

来源

2012-03-27 bspoel

这可能是你使用jQuery和Dom而不是SVG DOM进行交流，我现在在iPod上测试这个问题 – Chasbeen 2012-03-27 21:49:31

通过做这样要删除的DOM text2.node并与安装，只有点击事件一个新的DOM更换。

因此，尝试做这样的

$(text2.node).mouseup(function(event) { 
    // event.target is tspan 
    // event.target.childNodes[0] is TextNode 
    event.target.childNodes[0].nodeValue = "BYE WORLD"; 
    console.log("text2 mouseup", this); 
    });

我测试了它，它是工作的罚款

。

来源

2012-03-28 06:29:44 rajkamal

这解决了Chrome中的问题，但Firefox不再支持'replaceWholeText'，请参阅https：// developer .mozilla.org/en/DOM/text.replaceWholeText有没有其他的想法？ – bspoel 2012-03-28 09:56:09

哦..然后event.target.childNodes [0] .nodeValue = “BYE WORLD”;应该没事。 – rajkamal 2012-03-28 10:08:30

谢谢，这是有效的。我已经改变了你的答案来反映这一点。 – bspoel 2012-03-30 12:13:01

为什么在拉斐尔更改文本取消事件？

回答

相关问题