2

我在使用 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>

4

1 回答 1

2

可能你已经像这样嵌套了一个inputinside label：

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

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

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

jsFiddle 的现场演示。

编辑

看起来你在我写答案的同时编辑了你的问题。无论如何，即使inputs 是动态添加的，上面写的也是如此。请检查这个小提琴，如果你需要的话，请告诉我。该片段动态创建inputs，并将它们插入到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);
                });
            }
        }
    }
}());
于 2013-08-29T05:48:54.170 回答