Question

我有一个独特的小问题。当选择了特定的单选按钮时，我必须显示和隐藏容器。不幸的是，我的事件监听器在声明时被触发，而不是在事件实际发生时触发。还有其他人遇到过这类问题吗？

<!DOCTYPE html>
<html>
    <head><title>test</title></head>

<body>
    <form name="form">
       <input type="radio" name="r1" id="r1_yes" value="yes">
       <input type="radio" name="r1" id="r1_no" value="no">
       <div id="r1_comments" class="comments">Comments r1</div>
       <br />

       <input type="radio" name="r2" id="r2_yes" value="yes">
       <input type="radio" name="r2" id="r2_no" value="no">
       <div id="r2_comments" class="comments">Comments r2</div>
    </form>

<script type="text/javascript">
function checkCommentTrigger(element, comments, trigger) {
    if (element.value===trigger && element.checked) { comments.style.display="block"; }
    else { comments.style.display="none"; }
}

function comments(fieldName, commentsID, triggerValue) {
    var t_elements, t_comments, i;

    t_elements = document.getElementsByName("fieldName");
    t_comments = document.getElementById(commentsID);

    t_comments.style.display="none";        


    for (i=0; i<t_elements.length; i++) {
        if (t_elements[i].addEventListener){t_elements[i].addEventListener("click",checkCommentTrigger(this, t_comments, triggerValue),true);}
        else {t_elements[i].addEvent('onclick',checkCommentTrigger(this,t_comments,triggerValue));}
    }
}

comments("r1","r1_comments","no");
comments("r2","r2_comments","no");

</script>
</body>
</html>

Answer 1

你在“addEventListener”调用中调用函数。也就是说，在这段代码中（分成两行）：

   if (t_elements[i].addEventListener){
      t_elements[i].addEventListener("click",checkCommentTrigger(this, t_comments, triggerValue),true);}

你正在调用“checkCommentTrigger（）”函数。你需要做的是将一个引用传递给一个函数，所以像这样：

   if (t_elements[i].addEventListener){
      t_elements[i].addEventListener("click",function() { checkCommentTrigger(this, t_comments, triggerValue) },true);}

“if”的另一个分支相同：

   else {
      t_elements[i].attachEvent('onclick',function() { checkCommentTrigger(this,t_comments,triggerValue) });}

另外，你想要IE的“attachEvent（）”，而不是“addEvent（）”。

编辑 - 再看一遍，如果您按照我上面的说法使用它，那么该代码就会出现问题。该问题将源于函数中this的引用，以用作事件处理程序。我想你想要“checkCommentTrigger”的第一个参数作为要检查的元素。设置单独的函数可能最简单：

  function handlerFor(element, comments, value) {
    return function() {
      checkCommentTrigger(element, comments, value);
    }
  }

然后你可以在需要事件处理函数时调用它：

  if (t_elements[i].addEventListener){
      t_elements[i].addEventListener("click", handlerFor(t_elements[i], t_comments, triggerValue), true);
  }

声明时会触发JavaScript事件侦听器，而不会再次触发

1 个答案: