事件处理程序会导致许多警报

Question

我正在开发 Phonegap 应用程序，在其中我可以访问设备的联系人。然后，我在 window.localStorage 中存储最多 10 个联系人。为此，当用户选择一个按钮时，我创建一个包含三个元素的 div。

1. 图像（代表男性/女性联系人的联系人图标）
2. 联系人的姓名
3. 另一个图像（代表将其添加到 window.localStorage 的“添加”符号）

然后关联一个事件处理程序，该处理程序将首先检查该联系人是否已存在于localStorage，然后继续添加联系人。这是代码

function checkDuplicate(somevalue)
{
    for(var i=0;i<10;i++) {
        if(window.localStorage.getItem(i)!=null) {
            if(window.localStorage.getItem(i)==somevalue) {
                navigator.notification.alert('Entry exists at Button:'+i);
                return false;
            }
        }
    }
    //chosenButton is a global variable
    window.localStorage.setItem(chosenButton,somevalue);
    document.getElementById('contactNumberField').textContent=somevalue;
}

//Problem is with the event listener attached to span2. Please read below

function addContact(item)
{
    var parentDiv = document.getElementById('thelist');
    var childDiv = document.createElement('li');
    var span1 = document.createElement('span');
    span1.style.float='left';
    span1.innerHTML = "<img src='keypad-contact.png'/>";
    var span2 = document.createElement('span');
    span2.style.float='right';
    span2.innerHTML="<img src='keypad-addcontact.png'/>";
    span2.addEventListener('click',function({checkDuplicate(item.number);},false);
    childDiv.textContent=item.name;
    childDiv.style.color='white';
    childDiv.appendChild(span1);
    childDiv.appendChild(span2);
    parentDiv.appendChild(childDiv);    
}

function onSuccess(contacts)
{
    var objArray = new Array();
    for(var i=0; i<contacts.length;i++) {
        var tempObj = new Object();
        tempObj['name']=contacts[i].displayName;
        tempObj['number']=contacts[i].phoneNumbers[0].value;
        objArray.push(tempObj);                 
    }
    objArray.sort(
    function(a,b){
        var nameA = a.name.toLowerCase(),nameB=b.name.toLowerCase();
        if(nameA < nameB) return -1;
        else if(nameA > nameB) return 1;
        return 0;
    }); 
    for(var i=0; i<objArray.length;i++) addContact(objArray[i]);
}

function onDeviceReady()
{
    var options = new ContactFindOptions();
    options.multiple=true;
    var field = ["displayName","phoneNumbers"];
    navigator.contacts.find(field, onSuccess, function(){alert('NA');}, options);
}

问题

当我尝试添加 window.localStorage 中已存在的联系人时，第一次接触 span2 时，我收到一个警报。如果我尝试第二次触摸它来再次添加，我会收到两个警报..并且这种情况继续下去。问题在于与 span2 关联的事件处理程序。但是，我不知道如何克服这种情况。我怎样才能确保无论我按span2多少次，我只收到一次警报。如何在事件处理程序被触发后立即将其删除？

请帮忙。

Answer 1

固定的：
问题不在于动态添加事件处理程序。我碰巧在我的项目中使用了 iScroll (cubiq)，这导致了麻烦。现在我没有收到多个警报。诀窍是仅声明全局滚动变量一次。

var scroller = null;

然后在函数中，

if(!scroller) scroller = new iScroll('scrollableDiv');

我希望这对于像我一样使用 iScroll 并与多个警报作斗争的人来说是一个有用的提示。