TAGS :Viewed: 11 - Published at: a few seconds ago

[ Why does changing text in Raphael cancel events? ]

I have a Raphael text element with both a mouseup and click event handler. If I alter the text in the mouseup event handler, the click event handler does not get called anymore. Why does this happen?

I tested the following code in Chrome, Firefox and 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>

Answer 1


By doing like this you are removing the dom text2.node and replacing with a new dom which is attached with only click event.

So try doing like this

 $(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);
  });

I tested it it was working fine.