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

问题描述

| 我试图声明一个onclick方法，该方法将调用一个函数，该函数清除并重建显示的内容，其中显示了有关所单击项目的更多详细信息。问题是我尝试分配的“ 0”方法在分配时被执行，因此我看到的只是其中一项的详细视图。如果删除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\",title: dv.name});
}

解决方法

首先，您需要一个辅助函数：

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

然后，您将设置点击处理程序，如下所示：

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

辅助函数将为您构建一个函数，该函数将在调用该函数时调用您的“ detailView（）\”函数，并传入与该节点有关的项目。您注意到，在执行初始化时，您编写的代码简称为\“ detailView（）\”。 \“ onclick \”属性本身必须是一个函数，这就是我上面提出的辅助函数所提供的功能。 ,您需要将i.node.onclick设置为一个功能。您将其设置为detailView(items[cnt])，它将运行该功能，然后将i.node.onclick设置为返回值（is10ѭ）。您需要让detailView返回一个函数。

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

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

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

问题描述

解决方法

相关问答