Слушатель событий JavaScript срабатывает при объявлении, и никогда больше - PullRequest
Новая
       0

Слушатель событий JavaScript срабатывает при объявлении, и никогда больше

2 голосов
/ 18 августа 2011

У меня есть уникальная маленькая проблема. Я должен показать и скрыть контейнер, когда выбран определенный переключатель. К сожалению, мои слушатели событий запускаются при объявлении, а не когда событие действительно происходит. Кто-нибудь еще сталкивался с такой проблемой? 

<!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>

1 Ответ

4 голосов
/ 18 августа 2011

Вы вызываете функцию в вашем вызове "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) });}

Кроме того, вы хотите "attachEvent ()" для IE, а не "addEvent ()".

изменить & mdash; Глядя на это снова, в этом коде будет проблема, если вы будете использовать его, как я писал выше. Проблема будет связана со ссылкой на 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);
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...