Question

我有一个带有mouseup和click事件处理程序的Raphael文本元素。如果我更改了mouseup事件处理程序中的文本，则不会再调用click事件处理程序。为什么会这样？

我在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>

Answer 1

通过这样做，您将删除dom text2.node并替换为仅使用click事件附加的新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);
  });

我测试过它工作正常。

为什么改变拉斐尔的文字会取消活动？

1 个答案: