Метод onclick выполняется, когда я объявляю его - PullRequest
Новая
       2

Метод onclick выполняется, когда я объявляю его

1 голос
/ 24 мая 2011

Я пытаюсь объявить метод 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});
}

Ответы [ 2 ]

5 голосов
/ 24 мая 2011

Сначала вам понадобится вспомогательная функция: 

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

Тогда вы бы установили обработчик кликов следующим образом: 

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

Вспомогательная функция создает функцию, которая при вызове вызывает вашу функцию detailView (), передавая элемент, связанный с узлом. Как вы заметили, ваш код, написанный просто , вызывается"detailView ()" при выполнении инициализации. Атрибут «onclick» должен быть сам по себе функцией, что и даст вам вспомогательная функция, которую я предложил выше.

3 голосов
/ 24 мая 2011

Вам необходимо установить 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});
  };
}
...