Javascript 如何从动态生成的元素的函数调用touch或click事件

编辑：

我已经做了马修和尤西建议的改变，但似乎仍然不起作用。我在下面的帖子中也编辑了这些变化

它现在起作用了！谢谢你们

我有一个特殊的问题，我不能解决。如果你知道这个问题已经得到了回答，请将链接作为答案发送给我。在这种情况下，我尽量不使用框架，但在必要时可以使用jQuery

我已经找到了关于如何通过函数附加侦听器的答案，但是我需要一些东西，这样我就不必重构我已经拥有的所有代码。我是一个自由职业者，正在为别人的代码工作

发生的情况是，我想检测触摸设备的触摸事件。这段代码应该也适用于PC，所以我需要检测点击。这个DIV是通过编程方式创建的，我需要根据设备的不同向其中添加click或touch。最初，该函数是从onmousedown事件调用的，如下所示：

arrDivAnswers[c].onmousedown = onQuestionDown;

这就是它调用的函数：

function onQuestionDown(e)
{
    if(!itemSelected)
    {
        if(this.getAttribute('data-isCorrect') == 'true')
            setStyleQCorrect(this, true);
        else
            setStyleQIncorrect(this);

        this.querySelector('.answerText').style.color = '#ffffff';
        this.querySelector('.isCorrect').style.visibility = 'visible';
    }

    itemSelected = true;
}

这很好用。现在我已经做了这个，它将尝试为点击或触摸选择正确的事件。我需要一个功能，因为我必须不止一次地使用它——iStouch设备工作正常。我在其他一些应用程序上使用了该功能，因此代码非常简短，并且已经过测试：

function detectEventClickOrTouch(element, functionToCall){
  //detectEventClickOrTouch(arrDivAnswers[c], 'onQuestionDown');

  if(isTouchDevice()){
    element.addEventListener("touchend", functionToCall, false);
  } else{
    element.addEventListener("click", functionToCall, false);
  }
}

在某些循环中，DIV元素的创建方式如下：

    arrDivAnswers[c] = document.createElement('div');
    console.log( "Answer object #" + c + " = " + arrDivAnswers[c] );
    arrDivAnswers[c].className = 'autosize';
    arrDivAnswers[c].style.textAlign = 'left';
    arrDivAnswers[c].setAttribute('data-isCorrect',false);
    arrDivAnswers[c].setAttribute('data-isSelected',false);
    divAnswerContainer.appendChild(arrDivAnswers[c]);

然后事件像这样附加到它上面，旧方法已被注释掉：

for(c;c < arrQuestions[index].arrAnswers.length;c++)
        {
            var curAnswer = arrQuestions[index].arrAnswers[c];
            arrDivAnswers[c].onmouseover = function (e){setStyleQHover(e.currentTarget)};
            arrDivAnswers[c].onmouseout = function (e){setStyleQUp(e.currentTarget)};


            // Detect touch here *************************
            detectEventClickOrTouch(arrDivAnswers[c], onQuestionDown);
            //arrDivAnswers[c].onmousedown = onQuestionDown;
            // Detect touch here *************************

            arrDivAnswers[c].style.visibility = 'visible';
            arrDivAnswers[c].querySelector('.answerText').innerHTML = curAnswer.strAnswer;
            arrDivAnswers[c].setAttribute('data-isCorrect',curAnswer.isCorrect);
            if(curAnswer.isCorrect)
            {
                //arrDivAnswers[c].classList.add("correctAnswer");
                arrDivAnswers[c].className = "correctAnswer";
            }
            else
            {
                //arrDivAnswers[c].classList.remove("correctAnswer");
                arrDivAnswers[c].className = "autosize";
            }
            arrDivAnswers[c].setAttribute('data-isSelected',false);
            setStyleQUp(arrDivAnswers[c]);
            itemSelected = false;
        }
[...]

调试器正在引发以下错误：未捕获的TypeError:Object[Object DOMWindow]没有方法“getAttribute”

---

我肯定我把这个问题搞砸了，因为我没有正确调用这个函数。提前谢谢。

我同意这个变量的计算结果有点混乱。问题是您附加了一个匿名函数作为回调函数，然后在另一个方法上调用eval。这似乎没有必要

你能这样做吗：

function detectEventClickOrTouch(element, functionToCall){
  //detectEventClickOrTouch(arrDivAnswers[c], 'onQuestionDown');

  if(isTouchDevice()){
    element.addEventListener("touchend", functionToCall, false);
  } else{
    element.addEventListener("click", functionToCall, false);
  }
}

然后，在附加事件时，只需执行以下操作：

detectEventClickOrTouch(arrDivAnswers[c], onQuestionDown);

---

我同意这个变量正在变得混乱。问题是您附加了一个匿名函数作为回调函数，然后在另一个方法上调用eval。这似乎没有必要

你能这样做吗：

function detectEventClickOrTouch(element, functionToCall){
  //detectEventClickOrTouch(arrDivAnswers[c], 'onQuestionDown');

  if(isTouchDevice()){
    element.addEventListener("touchend", functionToCall, false);
  } else{
    element.addEventListener("click", functionToCall, false);
  }
}

然后，在附加事件时，只需执行以下操作：

detectEventClickOrTouch(arrDivAnswers[c], onQuestionDown);

---

由于您现在通过eval间接调用onQuestionDown函数，因此onQuestionDown看到的上下文是全局名称空间，而不是触发事件的元素

反正你也不需要评估。。。您可以自行传递函数

 detectEventClickOrTouch(arrDivAnswers[c], onQuestionDown);

以及：

---

由于您现在通过eval间接调用onQuestionDown函数，因此onQuestionDown看到的上下文是全局名称空间，而不是触发事件的元素

反正你也不需要评估。。。您可以自行传递函数

 detectEventClickOrTouch(arrDivAnswers[c], onQuestionDown);

以及：

---

很抱歉，我不得不给马修正确的答案。他知道你的答案。我想是他先到的。不过，你们都是对的。很抱歉，我不得不给马修正确的答案。他知道你的答案。我想是他先到的。不过，你们俩都是对的。