javascript addEventListener为两个不同的元素冲突

我必须防止在搜索表单上进行空搜索。形式没有提交按钮，所以我必须要防止进入javascript addEventListener为两个不同的元素冲突

html代码：

形式1

<form method="get" class="search-form" id="searchform" action="http://example.com" > 
       <input class="text" name="s" id="s" type="text" />  
    </form>

形式2

<form action="http://example.com" class="search-form" method="get">    
    <input type="text" name="s" class="text">       
</form>

javascript代码

// Im sure this funcions returns the 2 different forms, 
var searchForms = getElementsByClass('search-form');  
    for(i in searchForms) 
    { 
     if (searchForms[i].addEventListener) 
     { 
      searchForms[i].addEventListener("submit", function(e) 
       { 
       preventSubmit(e); // no problem here 
       console.log(i) // ALWAYS LOGS 1   
       }); 
     } //I also implemented the ie code, but not necessary here, is the same as above for addEventListener 

    }

每次我提交任何表格，在控制台写入1，有什么想法？感谢所有

来源

2012-07-06 Juan Jo

所以很多重复在那里，如[此酮]（http://stackoverflow.com/questions/6487366/how-to-generate-event-handlers-with-loop-in-javascript）。作为一个注意事项，当你只需要连续的数字迭代时，不要使用'for-in'。它可能会导致问题。 – 2012-07-06 18:07:46

preventSubmit（e）; console.log（this）//会给你正确的形式 – SMathew 2012-07-06 18:07:08

'i'是对索引的引用，而不是元素。 – 2012-07-06 18:22:35

您将需要一个封闭：

var searchForms = getElementsByClass('search-form');  
    for(i in searchForms) 
    { 
     if (searchForms[i].addEventListener) 
     { 
      (function(i) { // Closure start <-- We make our own static variable i 
       searchForms[i].addEventListener("submit", function(e) 
        { 
        preventSubmit(e); // no problem here 
        console.log(i)   
        }); 
      })(i); // Closure end. 
     } 
    }

这是因为你的循环后（for i in searchForms）i将是最后的值（=== 1）。您需要进行关闭以获得静态值i。

查看更多有关关闭位置：

How do JavaScript closures work?

来源

2012-07-06 18:06:23 andlrc

...不知道你为什么得到一个DV。 +1 – 2012-07-06 18:15:31

这就是答案！谢谢，安德烈亚斯我会读关于clousures – 2012-07-06 18:52:47

这是因为封闭PLS的发生会看到类似链接

Jquery dynamic buttons dialog for in loop doesn't populate function

来源

2012-07-06 18:08:21

不执行回调，直到提交 - 到那时i的值为1.封闭形式为immediately-executing function，允许我们捕获变化的值i并传递副本它对我们的功能。

另外

1），除了在某些情况下，通常避免for-in环路过阵列。使用传统的for循环。如果你使用你现在for-in在选择的形式通过ECMA5 querySelectorAll()方法，例如，你会得到意想不到的结果（四次迭代循环的，而不是两个）

2）你是不必要的重新评估该事件注册机制用于循环的每次迭代。在外面决定一次。

//get forms 
var searchForms = getElementsByClass('.search-form'); 

//initialise event registration depending on browser 
var addEvent = window.addEventListener ? function(el, evt, func, bubble) { 
    el.addEventListener(evt, func, bubble); 
} : function(el, evt, func) { 
    el.attachEvent('on'+evt, func); 
}; 

//bind submit events 
for (var i=0, len=searchForms.length; i<len; i++) { 
    (function(i) { 
     addEvent(searchForms[i], "submit", function(evt) { alert(i); preventSubmit(evt); }, false); 
    })(i); 
}

来源

2012-07-06 18:32:08 Utkanos

javascript addEventListener为两个不同的元素冲突

回答

相关问题