當我聲明它時，onclick方法得到執行

我想聲明一個onclick方法，該方法將調用一個函數，該函數清除並重新構建顯示單擊項目的更多細節的顯示。問題是我試圖分配的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}); 
}

來源

2011-05-24 BigMac66

首先你需要一個輔助函數：

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

然後，你設置的點擊處理程序是這樣的：

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

幫助程序函數爲您創建一個函數，當它被調用時，調用您的「detailView（）」函數，傳入與該節點相關的項目。正如你注意到的那樣，你的代碼寫成簡單的，在執行初始化時調用「detailView（）」。「onclick」屬性需要是一個函數本身，這是我上面提出的幫助函數會給你的。

來源

2011-05-24 14:22:25 Pointy

另一種選擇是在onclick中聲明匿名函數：'i.node.onclick = function（）{detailView（items [cnt]）; }' – 2011-05-24 14:30:43

@Platinum Azure在這種情況下不起作用，因爲賦值是在循環中完成的！ – Pointy 2011-05-24 14:42:29

啊，我認爲這個任務是針對不同的節點。我對拉斐爾一無所知，所以我可能是錯的。 :-(（這就是說，它看起來很可疑，就像它們是等價的，因爲你的函數返回我的匿名函數......） – 2011-05-24 14:49:46

您需要將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}); 
    }; 
}

來源

2011-05-24 14:22:35

是的，這將是另一種完美的方式來做事 – Pointy 2011-05-24 14:25:00

我喜歡這個選項是我有一個更少的功能來維護。 – BigMac66 2011-05-24 15:53:43

當我聲明它時，onclick方法得到執行

回答

相關問題