Question

我正在尝试声明一个onclick方法，该方法将调用一个清除和重建显示的函数，显示所单击项目的更多详细信息。问题是我分配的onclick方法在分配时执行，所以我看到的是其中一个项目的详细视图。

如果您移除i.node.onclick行，则会看到5个随机放置的项目，您可以将其悬停但不会点击。

HTML

<html>  
   <head>  
      <title>Raphael Play</title>  
      <script type="text/javascript" src="Raphael.js"></script>  
      <script type="text/javascript" src="Test.js"></script>  
      <style type="text/css">  
        #map 
        {  
           width: 500px;  
           border: 1px solid #aaa;  
        }  
      </style>  
   </head>  
   <body>  
      <div id="map"></div>  
   </body>  
</html>

的JavaScript

var map;
var items = new Array();

window.onload = function() 
{  
   map = new Raphael(document.getElementById('map'), 500, 500);  

   for(cnt = 0; cnt < 5; cnt++)
   {
      var x = 5 + Math.floor(Math.random() * 490);
      var y = 5 + Math.floor(Math.random() * 490);

      items[cnt] = new Item(x, y);

      var i = map.circle(items[cnt].x, items[cnt].y, 8).attr({fill: "#000", stroke: "#f00", title: items[cnt].name}); 
      i.node.onclick = detailView(items[cnt]);
   }
} 

function Item(x, y)
{
   this.x = x;
   this.y = y;
   this.name = "Item[" + x + "," + y + "]";
}

function detailView(dv)
{
   map.clear();

   map.circle(250, 250, 25).attr({fill: "#0f0", stroke: "#f00", title: dv.name});
}

Answer 1

首先你需要一个辅助功能：

  function detailViewer(item) {
    return function() { detailView(item); };
  }

然后你将点击处理程序设置为：

  i.node.onclick = detailViewer(items[cnt]);

辅助函数为你构建一个函数，当它被调用时，调用你的“detailView（）”函数，传入与节点相关的项目。正如您所注意到的那样，在执行初始化时，您的代码只需调用“detailView（）”。 “onclick”属性本身需要一个函数，这就是我上面提出的辅助函数给你的。

Answer 2

您需要将i.node.onclick设置为某个功能。您将其设置为运行该函数的detailView(items[cnt])，然后将i.node.onclick设置为返回值（undefined）。

您需要detailView返回一个功能。

function detailView(dv){
  return function(){
    map.clear();
    map.circle(250, 250, 25).attr({fill: "#0f0", stroke: "#f00", title: dv.name});
  };
}

当我声明它时，onclick方法被执行

2 个答案: