Question

我遇到使用addEventListener调用立即函数的问题，该函数调用它两次。试图从冒泡变为捕捉但不起作用。这是我的代码

一些描述：我正在尝试添加单击的文本框。

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>

Answer 1

您可能在input内嵌套了label，如下所示：

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

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

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

A live demo at jsFiddle

修改

在我写完答案的同时，您似乎编辑了自己的问题。无论如何，即使动态添加input s，上面写的内容仍然有效。请检查this fiddle，如果您需要，请告诉我们。该代码段会动态创建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); }); } } } }());

addEventListener以立即函数模式调用函数两次

1 个答案: