Home/ Questions/Q 7710603
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T01:10:01+00:00

I have a Raphael text element with both a mouseup and click event handler.

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0