addEventListener用immediate函数模式调用函数两次

addEventListener calling function twice with in immediate function pattern

本文关键字：函数 两次 调用 immediate 模式 addEventListener      更新时间：2023-09-26

我在用addEventListener调用immediate函数时遇到问题，该函数调用了两次。试图从冒泡变为捕捉，但没有成功。这是我的代码

一些描述：我正试图在它点击的地方添加文本框。

var mod = (function(){
    var sEventType = 'click',
        labelObj = document.getElementsByTagName('label');
            return {
                    createTextBox : function(targetId,inputVal){
                        alert('hi');
                        var elemInput = document.createElement('input');
                    },
                    addEvents : function(){
                        for (var i = 0; i < labelObj.length; i++) {
                            if (window.addEventListener) //Firefox, Chrome, Safari, IE 10
                            labelObj[i].addEventListener(sEventType,function(){ mod.createTextBox(this,this.innerHTML);}, false);
                            else if (window.attachEvent) //IE < 9
                            labelObj[i].attachEvent(sEventType, function(){ mod.createTextBox(this,this.innerHTML);});
                        }
                    }
          }
  }());
  //Intialise Event
  mod.addEvents();

查看正在调用createTextBox的addEventListener，在弹出窗口中发出两次警报。

这是HTML部分

<body>
<div id='tableMain'>
  <div id='exlTopHd'>
    <div id='loginData'>
      <div id='yourName'><label id='mNam'>type your name here</label></div>
      <div id='yourEmail'><label>your email address</label></div>
    </div>
    <div id='exlCtr'>
        <div id='exlTitle'><label>add title<lable></div>
        <div id='addRow'>+row</div>
        <div id='addColomn'>+colomn</div>
        <div id='saveExl'>saving...</div>
    </div>  
  </div>
  <div id='exlTb'></div>
</div>

可能您在label中嵌套了一个input，如下所示：

<label>Check 1: <input type="checkbox" /></label>

当使用嵌套元素时，单击label也会触发单击input。为了避免这种情况，您可以使用for属性：

<label for="check1">Check 1: </label><input id="check1" type="checkbox" />

jsFiddle的现场演示。

编辑

看起来你在我写答案的同时编辑了你的问题。不管怎样，上面写的内容仍然有效，即使input是动态添加的。请检查一下这把小提琴，如果你需要的话，请告诉我。该代码段动态创建input，并将它们插入到label之后。

以下是修改后的代码片段：

var mod = (function () {
    var sEventType = 'click',
        labelObj = document.getElementsByTagName('label');
    return {
        createTextBox: function (e) {
            var target = e.target || e.srcElement,
                parent = target.parentElement,
                elemInput = document.createElement('input');
                inpId = parent.id + 'Inp';
            elemInput.value = target.innerHTML;
            elemInput.id = inpId;
            target.setAttribute('for', inpId);
            parent.insertBefore(elemInput, target.nextSibling);
        },
        addEvents: function () {
            for (var i = 0; i < labelObj.length; i++) {
                if (window.addEventListener) //Firefox, Chrome, Safari, IE 10
                labelObj[i].addEventListener(sEventType, function (e) {
                    mod.createTextBox(e);
                }, false);
                else if (window.attachEvent) //IE < 9
                labelObj[i].attachEvent('on' + sEventType, function (e) {
                    mod.createTextBox(e);
                });
            }
        }
    }
}());
相关文章：