在javascript中使div可点击

Question

我试图动态地使可单击的div。 我插入了一个测试功能。 即使未单击div，测试功能也会运行。 谢谢你的帮助。

  function displayResults(responseTxt)
  { 
        var results = document.getElementById("results");
        jsonObj = eval ("(" + responseTxt + ")");
        var length = jsonObj.response.artists.length;
        results.innerHTML = "Please click on an artist for more details: "

        for ( var i = 0; i < length; i++)
        {
            var entry = document.createElement("div");
            var field = document.createElement("fieldset");

            entry.id = i;
            entry.innerHTML = i + 1 + ". " + jsonObj.response.artists[i].name; 
            field.appendChild(entry);
            results.appendChild(field);
            //entry.addEventListener("click", idSearch(jsonObj.response.artists[i].id), false);
            entry.addEventListener("click", test(), false);

        } 
  } // end function displayResults          

  function test()
  {
        document.getElementById("results").innerHTML = "tested";
  }

Answer 1

您正在调用test()函数并将其返回值传递给.addEventListener() 。 删除括号：

entry.addEventListener("click", test, false);

这样您就可以将函数本身传递给.addEventListener() 。

这样可以回答所问的问题，但是可以预料到下一个问题，因为您注释掉了该行，您可以这样做：

entry.addEventListener("click",
                       function() {
                          idSearch(jsonObj.response.artists[i].id);
                       }, false);

也就是说，创建一个匿名函数传递给.addEventListener() ，其中匿名函数会知道如何使用参数调用idSearch()函数。 否则那是行不通的，因为当实际触发事件时， i将获得循环结束时的值。 您需要添加一个额外的函数/闭包，以便可以访问i的各个值：

    for ( var i = 0; i < length; i++)
    {        
        var entry = document.createElement("div");
        var field = document.createElement("fieldset");

        entry.id = i;
        entry.innerHTML = i + 1 + ". " + jsonObj.response.artists[i].name; 
        field.appendChild(entry);
        results.appendChild(field);
        // add immediately-invoked anonymous function here:
        (function(i) {
            entry.addEventListener("click",
                               function() {
                                  idSearch(jsonObj.response.artists[i].id);
                               }, false);
        })(i);
    }

这种方式， i在jsonObj.response.artists[i].id实际上将成为参数i从匿名函数，它是的各个值i从在每次迭代运行时的循环。