javascript addEventListener对于两个不同的元素冲突

时间:2012-07-06 18:02:10

标签: javascript javascript-events addeventlistener

我必须在搜索表单上阻止空搜索sumbit。 表单没有提交按钮,所以我必须阻止输入

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, 任何的想法? 感谢所有

3 个答案:

答案 0 :(得分:4)

你需要一个闭包:

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 searchFormsi之后将是最后一个值(=== 1)。您需要使闭包的静态值为i

在此处查看有关闭包的更多信息:

How do JavaScript closures work?

答案 1 :(得分:1)

在提交之前不会执行回调 - 此时i的值为1.闭包以immediately-executing function的形式允许我们捕获{{1}的变化值并将其副本传递给我们的函数。

另外

1)除了在某些情况下,通常避免数组上的i循环。使用传统的for-in循环。例如,如果您使用通过ECMA5 for方法选择表单的现有for-in,您将获得意外结果(循环的四次迭代,而不是两次)

2)您不必要地重新评估在循环的每次迭代中使用哪种事件注册机制。在外面决定一次。

querySelectorAll()

答案 2 :(得分:0)

这是因为关闭pls看到类似的链接

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