个人中心
gpt4 book ai didi

javascript - onclick 方法在我声明时执行

转载 作者：行者123 更新时间：2023-11-30 07:28:39 26 4
gpt4 key购买 nike

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

如果删除 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});
}

最佳答案

首先你需要一个辅助函数:

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

然后您将像这样设置点击处理程序:

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

辅助函数为您构建了一个函数，当它被调用时，将调用您的“detailView()”函数，传入与节点相关的项目。如您所见，您编写的代码只是在执行初始化时调用“detailView()”。 “onclick”属性本身需要是一个函数，这就是我上面提出的辅助函数将为您提供的。

关于javascript - onclick 方法在我声明时执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6111873/

26 4 0
文章推荐： java - 在两个 Ginjector 实例中使用 @Singleton
文章推荐： java - 如何在 Spring XD 中向 "side channel"发送消息？
文章推荐： java - 基于可变属性的 TreeSet 比较器
文章推荐： java - SmartGWT - 如何检查 ListGridRecord 是否展开或折叠？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com